Kevin Powell - Community•3y ago

Collapsible content

What am I doing wrong in here? https://codepen.io/myntsu/pen/gOKYOep I'm trying to make a collapsible content. Also, I want to make it collapse again when out of users' vision, but I can't grasp my head around on how to do it.

Myndi

CodePen

gOKYOep

...

9 Replies

MyndiOP•3y ago

Basically the content deploys (or should) on triggering the arrow downwards.

Jochem•3y ago

getElementsByClassName returns an array, so if you want to use that for collapsible, you have to use var collapsible = document.getElementsByClassName("collapsible")[0]; with the [0] at the end, or handle the fact that it's an array whenever you use it var content = collapsible[0]; would work too I'd also recommend not using var anymore, use const unless you know you need to change the variable, then use let

Unknown User•3y ago

Message Not Public

MarkBoots•3y ago

the "collapse when out of users vision" will be strange. It will make the page jump as soon as it collapses for the toggle collapse part itself personally i like the inline onclick event. That is reusable (just change the parameter to select the target). Something like this

<button onclick="toggleDisplay(`#Content-Table`)"></button>

<button onclick="toggleDisplay(`#Content-Table`)"></button>

function toggleDisplay(query){
  const element = document.querySelector(query);
  const currentState = element.style.display;
  element.style.display = currentState === 'none' ? 'block' : 'none'
}

function toggleDisplay(query){
  const element = document.querySelector(query);
  const currentState = element.style.display;
  element.style.display = currentState === 'none' ? 'block' : 'none'
}

Jochem•3y ago

I generally avoid the onclick attribute in HTML, it's usually better to do that all in your javascript... but this is nice and compact

MarkBoots•3y ago

i think for a small project it is totally fine

Jochem•3y ago

yeah, agreed

MarkBoots•3y ago

without the onclick, but still easy manageable and reusable. without having to dive in the js

<button data-displaytoggle="#Content-Table"></button>

<button data-displaytoggle="#Content-Table"></button>

const displayToggleBtns = document.querySelectorAll("button[data-displaytoggle]") || [];

displayToggleBtns.forEach(displayToggleBtn => {
  displayToggleBtn.addEventListener('click', () => {
    const element = document.querySelector(displayToggleBtn.dataset.displaytoggle);
    const currentState = element.style.display;
    element.style.display = currentState === 'none' ? 'block' : 'none'
  })
})

const displayToggleBtns = document.querySelectorAll("button[data-displaytoggle]") || [];

displayToggleBtns.forEach(displayToggleBtn => {
  displayToggleBtn.addEventListener('click', () => {
    const element = document.querySelector(displayToggleBtn.dataset.displaytoggle);
    const currentState = element.style.display;
    element.style.display = currentState === 'none' ? 'block' : 'none'
  })
})

MyndiOP•3y ago

Noted both things. I was thinking of, whenever you click a link, it collapses back.

Gaming

Programming

Collapsible content