Accordion

Uses "data" attributes to determine behavior (e.g., if first item is open, if multiple items can be open at the same time).

First Item Open on Load, Allow One Item Open At a Time

The "data-accordion-open-first" attribute is set to true.
The "data-accordion-open-multiple" attribute is set to false.

  • Accordion Item #1

    Donec efficitur neque ac est bibendum efficitur. Ut id diam vulputate, euismod orci vel, dictum nisl. Nam sit amet hendrerit mi. Curabitur quis sodales mi. Suspendisse aliquam tristique orci scelerisque feugiat. Proin sit amet consequat lectus. Mauris eu mi sodales, posuere neque sed, semper arcu. Mauris dictum eros sed sapien accumsan ultrices. Donec ut purus vestibulum, laoreet dolor vitae, molestie est. Morbi ac bibendum quam, a consectetur lectus. Quisque pellentesque in tortor ac sagittis. Curabitur feugiat odio in egestas pellentesque. Duis ex tellus, tristique ornare augue pretium, porta pharetra mauris. Sed in justo eu magna feugiat fringilla non ac risus.

  • Accordion Item #2 Has a Really Long Title That Keeps on Going and Going

    Proin vel ante et nibh vestibulum vestibulum nec eget felis. Proin volutpat mauris nec metus malesuada, a interdum sapien tincidunt. Mauris at scelerisque velit, eleifend accumsan justo. Nullam eu auctor dolor. Morbi scelerisque turpis non purus suscipit, non aliquet nisl interdum. Curabitur at neque varius, pretium enim vel, venenatis mauris. Vivamus vestibulum commodo ex eu feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend eget nibh at blandit. Quisque ut orci at dolor efficitur porttitor. Suspendisse eu erat volutpat, rhoncus arcu sit amet, dictum velit. Praesent nec rhoncus nisl. Vestibulum vitae tempus nunc. Suspendisse bibendum purus nec nulla scelerisque, sed rutrum mi dignissim. Nam at ex sit amet velit tristique cursus a eu ipsum.

  • Accordion Item #3

    Cras varius euismod tellus ac pellentesque. Praesent tincidunt lobortis metus, id gravida velit dapibus sed. Praesent in pretium velit. Pellentesque vehicula justo a urna fringilla scelerisque. Suspendisse scelerisque et enim non aliquam. Aliquam dolor odio, finibus consequat ornare at, consectetur et nulla. Pellentesque lacinia rhoncus diam, ac ullamcorper turpis molestie non. Vestibulum dui enim, venenatis eget nunc sed, rutrum scelerisque massa. Vestibulum aliquam, ex sed pulvinar fermentum, augue dolor ullamcorper nisi, sit amet fermentum augue purus non est. Phasellus ut nibh non dui suscipit venenatis.

<div class="accordion" id=""
	data-accordion-open-first="true"
	data-accordion-open-multiple="false"
>
	<ul class="accordion__items">
		<li class="accordion-item" id="">
			<div class="accordion-item__content">
				<div class="accordion-item-label">
					[Accordion Item Label Goes Here]
				</div>
				<div class="accordion-item-description">
					[Accordion Item Content Goes Here]
				</div>
			</div>
		</li>
	</ul>
</div>

All Items Closed on Load, Allow One Item Open At a Time

The "data-accordion-open-first" attribute is set to false.
The "data-accordion-open-multiple" attribute is set to false.

  • Accordion Item #1

    Donec efficitur neque ac est bibendum efficitur. Ut id diam vulputate, euismod orci vel, dictum nisl. Nam sit amet hendrerit mi. Curabitur quis sodales mi. Suspendisse aliquam tristique orci scelerisque feugiat. Proin sit amet consequat lectus. Mauris eu mi sodales, posuere neque sed, semper arcu. Mauris dictum eros sed sapien accumsan ultrices. Donec ut purus vestibulum, laoreet dolor vitae, molestie est. Morbi ac bibendum quam, a consectetur lectus. Quisque pellentesque in tortor ac sagittis. Curabitur feugiat odio in egestas pellentesque. Duis ex tellus, tristique ornare augue pretium, porta pharetra mauris. Sed in justo eu magna feugiat fringilla non ac risus.

  • Accordion Item #2 Has a Really Long Title That Keeps on Going and Going

    Proin vel ante et nibh vestibulum vestibulum nec eget felis. Proin volutpat mauris nec metus malesuada, a interdum sapien tincidunt. Mauris at scelerisque velit, eleifend accumsan justo. Nullam eu auctor dolor. Morbi scelerisque turpis non purus suscipit, non aliquet nisl interdum. Curabitur at neque varius, pretium enim vel, venenatis mauris. Vivamus vestibulum commodo ex eu feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend eget nibh at blandit. Quisque ut orci at dolor efficitur porttitor. Suspendisse eu erat volutpat, rhoncus arcu sit amet, dictum velit. Praesent nec rhoncus nisl. Vestibulum vitae tempus nunc. Suspendisse bibendum purus nec nulla scelerisque, sed rutrum mi dignissim. Nam at ex sit amet velit tristique cursus a eu ipsum.

  • Accordion Item #3

    Cras varius euismod tellus ac pellentesque. Praesent tincidunt lobortis metus, id gravida velit dapibus sed. Praesent in pretium velit. Pellentesque vehicula justo a urna fringilla scelerisque. Suspendisse scelerisque et enim non aliquam. Aliquam dolor odio, finibus consequat ornare at, consectetur et nulla. Pellentesque lacinia rhoncus diam, ac ullamcorper turpis molestie non. Vestibulum dui enim, venenatis eget nunc sed, rutrum scelerisque massa. Vestibulum aliquam, ex sed pulvinar fermentum, augue dolor ullamcorper nisi, sit amet fermentum augue purus non est. Phasellus ut nibh non dui suscipit venenatis.

<div class="accordion" id=""
	data-accordion-open-first="false"
	data-accordion-open-multiple="false"
>
	<ul class="accordion__items">
		<li class="accordion-item" id="">
			<div class="accordion-item__content">
				<div class="accordion-item-label">
					[Accordion Item Label Goes Here]
				</div>
				<div class="accordion-item-description">
					[Accordion Item Content Goes Here]
				</div>
			</div>
		</li>
	</ul>
</div>

All Items Closed on Load, Allow Multiple Items Open At Once

The "data-accordion-open-first" attribute is set to false.
The "data-accordion-open-multiple" attribute is set to true.

  • Accordion Item #1

    Donec efficitur neque ac est bibendum efficitur. Ut id diam vulputate, euismod orci vel, dictum nisl. Nam sit amet hendrerit mi. Curabitur quis sodales mi. Suspendisse aliquam tristique orci scelerisque feugiat. Proin sit amet consequat lectus. Mauris eu mi sodales, posuere neque sed, semper arcu. Mauris dictum eros sed sapien accumsan ultrices. Donec ut purus vestibulum, laoreet dolor vitae, molestie est. Morbi ac bibendum quam, a consectetur lectus. Quisque pellentesque in tortor ac sagittis. Curabitur feugiat odio in egestas pellentesque. Duis ex tellus, tristique ornare augue pretium, porta pharetra mauris. Sed in justo eu magna feugiat fringilla non ac risus.

  • Accordion Item #2 Has a Really Long Title That Keeps on Going and Going

    Proin vel ante et nibh vestibulum vestibulum nec eget felis. Proin volutpat mauris nec metus malesuada, a interdum sapien tincidunt. Mauris at scelerisque velit, eleifend accumsan justo. Nullam eu auctor dolor. Morbi scelerisque turpis non purus suscipit, non aliquet nisl interdum. Curabitur at neque varius, pretium enim vel, venenatis mauris. Vivamus vestibulum commodo ex eu feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eleifend eget nibh at blandit. Quisque ut orci at dolor efficitur porttitor. Suspendisse eu erat volutpat, rhoncus arcu sit amet, dictum velit. Praesent nec rhoncus nisl. Vestibulum vitae tempus nunc. Suspendisse bibendum purus nec nulla scelerisque, sed rutrum mi dignissim. Nam at ex sit amet velit tristique cursus a eu ipsum.

  • Accordion Item #3

    Cras varius euismod tellus ac pellentesque. Praesent tincidunt lobortis metus, id gravida velit dapibus sed. Praesent in pretium velit. Pellentesque vehicula justo a urna fringilla scelerisque. Suspendisse scelerisque et enim non aliquam. Aliquam dolor odio, finibus consequat ornare at, consectetur et nulla. Pellentesque lacinia rhoncus diam, ac ullamcorper turpis molestie non. Vestibulum dui enim, venenatis eget nunc sed, rutrum scelerisque massa. Vestibulum aliquam, ex sed pulvinar fermentum, augue dolor ullamcorper nisi, sit amet fermentum augue purus non est. Phasellus ut nibh non dui suscipit venenatis.

<div class="accordion" id=""
	data-accordion-open-first="false"
	data-accordion-open-multiple="true"
>
	<ul class="accordion__items">
		<li class="accordion-item" id="">
			<div class="accordion-item__content">
				<div class="accordion-item-label">
					[Accordion Item Label Goes Here]
				</div>
				<div class="accordion-item-description">
					[Accordion Item Content Goes Here]
				</div>
			</div>
		</li>
	</ul>
</div>

Class Reference

Class Info
accordion Primary container. Should be added to a div.
accordion__items Denotes a group of accordion items. Should be added to a ul.
accordion-item Denotes a single accordion item. Should be added to a li.
accordion-item__content Denotes the container for all of a single accordion item's content. Should be added to a div.
accordion-item-label Denotes an accordion item's label. Should be added to a div.
accordion-item-description Denotes an accordion item's description. Should be added to a div.