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
Myndi
Myndi3y ago
Basically the content deploys (or should) on triggering the arrow downwards.
Jochem
Jochem3y 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
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
MarkBoots
MarkBoots3y 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
Jochem3y 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
MarkBoots3y ago
i think for a small project it is totally fine
Jochem
Jochem3y ago
yeah, agreed
MarkBoots
MarkBoots3y 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'
})
})
Myndi
Myndi3y ago
Noted both things. I was thinking of, whenever you click a link, it collapses back.
Want results from more Discord servers?
Add your server