Skip to content

Instantly share code, notes, and snippets.

@erikpantzar
Last active January 3, 2017 13:06
Show Gist options
  • Save erikpantzar/89d6ec28a6cd5290f217c0ee19c5466a to your computer and use it in GitHub Desktop.
Save erikpantzar/89d6ec28a6cd5290f217c0ee19c5466a to your computer and use it in GitHub Desktop.
export default accordion;
function accordion(arrayOfAccordions = []) {
for(let i = 0; i<arrayOfAccordions.length; i++) {
arrayOfAccordions[i].addEventListener('click', (el) => {
if(el.target.classList.contains('js-accordion-toggler')) {
el.target.parentNode.classList.toggle('accordion__item--expanded');
}
return false;
});
}
}
/*
Given following markup
<ul class="accordion">
<li className="accordion__item">
<a class="js-accordion-toggler">
// TOGGLER CONTENT
</a>
<div class="accordion__content">
// CONTENT HERE
</div>
</li>
</ul>
<style>
.accordion__content {
display: none;
}
.accordion__item--expanded .accordion__content {
display: block;
}
</style>
*/
@Orsman
Copy link

Orsman commented Jan 3, 2017

el.target.classList.value.indexOf('js-accordion-toggler')) {

går också att skriva som

el.target.classList.contains('js-accordion-toggler')

@Orsman
Copy link

Orsman commented Jan 3, 2017

Varför anropar du toggleAccordionItem när det bara är en rad kod som du kan köra ist för funktionsanropet? Toggler som du skickar med används inte.

Ska denna byggas ut?

@erikpantzar
Copy link
Author

Updaterade efter dina kommentarer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment