Accordion triggers and content must be adjacent elements, utilizing .accordion-trigger and .accordion-target respectively.
//Get the trigger elements
var triggers = document.getElementsByClassName('accordion-trigger');
//Loop through them and add click listener
for (let i = 0; i < triggers.length; i++) {
const trigger = triggers[i];
trigger.addEventListener('click', function(event) {
let clickedElement = event.target,
clickedElementAlreadyOpen = clickedElement.classList.contains('open');
//If the element that was clicked is open
if (clickedElementAlreadyOpen) {
//Close it
clickedElement.classList.remove('open');
} else {
//Close any others that may be open
for (let j = 0; j < triggers.length; j++) {
const trigger = triggers[j];
trigger.classList.remove('open');
}
//Then, open the one that was clicked
clickedElement.classList.add('open');
}
}) //trigger.addEventListener()
}
.accordion-trigger {
&.question {
font-size: 1.4em;
font-weight: 800;
cursor: pointer;
margin: 0;
position: relative;
&:before {
content: '+';
margin-right: 5px;
}
&.open {
& + .answer {
max-height: none;
padding: 1rem 0 1rem 2rem;
}
&:before {
content: '-';
}
}
}
}
.accordion-target {
max-height: 0;
overflow: hidden;
&.answer {
padding: 0;
}
}