Accordion

Demo

Usage

<ul class="c-accordion" id="accordion" data-accordion>
	<li data-accordion-item>
		<h2 class="title">
			<button aria-expanded="false">Title 1</button>
		</h2>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p>
		</div>
	</li>
	<li data-accordion-item>
		<h2 class="title">
			<button aria-expanded="false">Title 1</button>
		</h2>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p>
		</div>
	</li>
	<li data-accordion-item>
		<h2 class="title">
			<button aria-expanded="false">Title 1</button>
		</h2>
		<div>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra sem lectus, sit amet sodales eros suscipit a. In ac ligula sit amet ligula dictum finibus. Maecenas tristique sed purus in posuere. Integer finibus mi semper ex iaculis varius. Mauris euismod odio vitae justo rhoncus, ut maximus velit ultrices. Maecenas ac purus non diam scelerisque rhoncus eget tristique tellus. Donec ante nunc, malesuada nec mattis vitae, sollicitudin nec nunc. Donec in pretium neque. Nam mattis eu mi a aliquam. Maecenas pellentesque elit in nibh tincidunt, eu aliquet nibh dictum.</p>
		</div>
	</li>
</ul>
// Initialize for all elements in the DOM
Accordion.setup();

// Initialize for elements in a NodeList or Array
Accordion.setup(document.querySelectorAll(".elements"));

// Initialize for one element
new Accordion(document.querySelector("#element"));