Accordions
What Are Accordions?
An accordion is a graphical control element that can expand or collapse to show or hide content. It includes a header, which will be persistently visible regardless of whether the state is expanded or collapsed, and body content that will be hidden when the accordion is collapsed, and shown when the accordion is expanded.
Here is an example:
Heading 1
Cupcake ipsum dolor sit amet oat cake tootsie roll bear claw. Pastry donut caramels jelly powder gummi bears chocolate bar apple pie.
How Do I Add Accordions?
Accordions are not built into CKEditor, so to include them in your Drupal page, you'll need to learn how to build them in HTML. Here is the code used to generate the sample accordion you see above:
<div class="accordion">
<div>
<h3>Heading 1</h3>
</div>
<div>
<p>Cupcake ipsum dolor sit amet oat cake tootsie roll bear claw. Pastry donut caramels jelly powder gummi bears chocolate bar apple pie.</p>
</div>
</div>
Breaking Down The Code
The HTML above has three divs that organize your content.
- The "Wrapper" div: wraps around all the other code for your entire accordion.
You must apply the "accordion" class to this div.
- The "Header" div: encloses the header of your accordion.
The accordion will take whatever content is within this div and use it as the persistent text that it always visible and can be clicked to expanded or collapse your accordion.
You can use different tags for this text, but in most cases we suggest using an H3 header.
This div has no class applied to it.
- The "Body" div: encloses the body content of your accordion.
The accordion will take whatever content is within this div and either hide or display it, depending on if the accordion is expanded or collapsed.
You can use most tags in the body div, even ones that aren't text-based like images. However, keep in mind that any elements which are not responsive outside of an accordion (like tables) won't respond properly inside of an accordion either. They may not render as expected, especially on smaller browser windows.
This div has no class applied to it.
Using Multiple Accordions
You can use multiple accordions on your page, even stacked right on top of each other. Here's an example –
Heading 1
Cupcake ipsum dolor sit amet oat cake tootsie roll bear claw. Pastry donut caramels jelly powder gummi bears chocolate bar apple pie.
Heading 2
Cotton candy lollipop candy canes biscuit wafer carrot cake sweet roll jujubes. Cotton candy ice cream candy carrot cake pudding marzipan gingerbread sugar plum lemon drops.
Heading 3
Topping jujubes liquorice ice cream croissant chocolate bar cookie pastry wafer. Cake cake cake.
This is done simply by repeating the HTML we used to build a single accordion. Make sure that each accordion has it's own wrapper! The code we used to generate the accordions you see above is here:
<div class="accordion">
<div>
<h4>Heading 1</h4>
</div>
<div>
<p>Cupcake ipsum dolor sit amet oat cake tootsie roll bear claw. Pastry donut caramels jelly powder gummi bears chocolate bar apple pie.</p>
</div>
</div>
<div class="accordion">
<div>
<h4>Heading 2</h4>
</div>
<div>
<p>Cotton candy lollipop candy canes biscuit wafer carrot cake sweet roll jujubes. Cotton candy ice cream candy carrot cake pudding marzipan gingerbread sugar plum lemon drops.</p>
</div>
</div>
<div class="accordion">
<div>
<h4>Heading 3</h4>
</div>
<div>
<p>Topping jujubes liquorice ice cream croissant chocolate bar cookie pastry wafer. Cake cake cake.</p>
</div>
</div>
What Header Tag Should My Accordion Title Be?
Consider the context of your page – the best practice is for your header tag to be one smaller than the header preceding the section your accordion is part of. For example, this section – "What Header Tag Should My Accordion Title Be?" – is an H2 header. If we were to put an accordion in this section, it would be best to use an H3 header.
In most situations, you will probably find the H3 to be appropriate, but consider your context!
