Тестовая страница

Responsive Accordion

Here is my attempt at creating a object oriented-ish accordion using BEM CSS guidlines. This accordion is fully responsive and completely barebones, making it easy to style however you want.

Height Auto Transition

Accordion transitions are handled by CSS3 transitions. To make the accordion responsive, I've implemented a way to basically pull off a height: 0; to height: auto; transition.

This transition is pulled off by expanding __content to the element's scrollHeight and then setting the height to auto using transitionend. The reverse animation is achieved using a 4ms delay between reassignign the content height and animating the height back to 0.

Data Attribute vs JS-Class

I bounced back and forth between applying the .js-accordion--open class and using a data-state. I stuck with a simple class since jsperf indicates data-attributes still take a performance hit.

Ultimately, neither trigger case adheres directly to the BEM guidelines. I wanted to be able simply use modifiers (ex: .accordion__content--open), but filtering through a sea of element--modifier combinations or using i-bem was something I didn't want to tackle.