The accordion allows you to display a large amount of information in a clean, efficient format.

Example of how accordions display

This is an example of an h2 tag. Click here to open accordion.

This is an example of a h3 tag. Click here to open accordion.

HTML code used to create the accordions above

	
<h2 class="DUAccordion"><a href="#">This is an example of an h2 tag. Click here to open accordion.</a> </h2>
<div class="accordion-content">
<p>This is the accordion content. Images and links can go here.</p>
</div>

<h3 class="DUAccordion"><a href="#">This is an example of a h3 tag. Click here to open accordion.</a> </h3>
<div class="accordion-content">
<p>This is the accordion content. Images and links can go here. </p>
</div>
	

Steps to Creating an Accordion

1. Navigate to the page or snippet where the accordion will be located.
2. Above the Body field, click Edit HTML, not Show Editor.
3. Copy or type the HTML code from above for the appropriate heading tag.

   Read about choosing the appropriate heading tag.

4. Modify the text in the HTML section to reflect your content.
5. Save and publish the page when finished