Accordion

Overview

The accordion component allows you to list items and expand/collapse the display of content within each item. This is useful if you have content that you want to break up into sections, such as FAQ pages. 

How To Use

To add an accordion you must do the following:

• Add each accordion item
• Add your accordion title to each item
• Add your content within each accordion item

Markup

Use a div element with the class of accordion to build each accordion item. Set the title of each clickable item in an a element with the class of toggle-accordion. Any content should be placed in a div element with the class of accordion-content.

<div class="accordion">
	<a class="toggle-accordion" href="#">Accordion Item 1</a>
	<div class="accordion-content">
		<!-- Insert Content Here -->
	</div>
</div>
<div class="accordion">
	<a class="toggle-accordion" href="#">Accordion Item 2</a>
	<div class="accordion-content">
		<!-- Insert Content Here -->
	</div>
</div>
<div class="accordion">
	<a class="toggle-accordion" href="#">Accordion Item 3</a>
	<div class="accordion-content">
		<!-- Insert Content Here -->
	</div>
</div>