Accordions

Website Design Skill Level:

Accordions are useful ways of breaking up a page of information, making our pages look appealling and sleek. It also focuses the reader and can help to maintain focus. 

Example

Adding Accordions to your Page

To add a basic accordion to your page, please copy and paste the entire content below. You can add as many accordions to the section as you like, by simply adding additional AccordionTitle and AccordionContent lines.

AccordionTitle can only contain text. You should not add any tags or theming as this is automatic (the site will make the row appear like Header 2).

AccordionContent can hold rich content including fully themed text, images and interactive features. 

<div class="accordion">
  <div class="accordionTitle">Header of accordion 1 goes here</div>
  <div class="accordionContent">Content of accordion 1 goes here</div>
  <div class="accordionTitle">Header of accordion 2 goes here</div>
  <div class="accordionContent">Content of accordion 2 goes here</div>
  <div class="accordionTitle">Header of accordion 3 goes here</div>
  <div class="accordionContent">Content of accordion 3 goes here</div>
  <div class="accordionTitle">Header of accordion 4 goes here</div>
  <div class="accordionContent">Content of accordion 4 goes here</div>
</div>

Troubleshooting

There are a couple of common issues that you might encounter when working with accordions.

First is the effect demonstrated below: at a glance the accordion looks okay, but when you open the header the icon on the right moves around a lot and doesn't look quite right.

This is caused by adding theming to the text in the accordionTitle. Currently, the accordion component doesn't remove this theming and this creates a slightly bigger box than would normally be created. To fix this, simply remove the tags surrounding your text (eg p, h1, h2, h3, h4)

A common error, caused by using the WYSIWYG (the editor that looks like Microsoft Word) rather than code, is demonstrated below:

For every accordionTitle section there must be an accordionContent section. These sections must be ordered alternately and be complete. In the example above, one section has been deleted in full, so the number is odd. But if you accidently delete or move a tag to the wrong place in the code, the same effect will appear on screen. 

To repair this, simply work through your code and make sure that the structure matches that in the code box above (with your content closed off by a single </div> tag.