Accordions are a useful way of displaying content in a long page. You separate your content into a series of stacked headings and the reader clicks on each heading to view the detail below it. FAQs, inventories and procedures are examples of content that works well in this clean layout.

You can add an unlimited amount of 'accordion items' to an accordion. Compare this to Tabs where you are limited to a minimum of two and a maximum of six tabs. 

Note: adding too many accordions items will make difficult for users to navigate, so we would recommend aiming for a mximum of  ten items per accordion. 

You could use a General A-Z list as an alternative to the Accordion when you want all the information visible at a glance.

This is an accordion

Instructions

There are three main steps to creating an accordion - 1) creating the correct accordion folder structure 2) Adding the accordion items 3) Adding the Accordion widget to display the accordion on the page.

Step one: Create the correct accordion folder structure

1. Add a hidden sub-section to the page you want your accordion to appear and call it Accordion -this must be spelt correctly, with the capitalised 'A' and no additional characters such as spaces or fullstops.

The combination of hiding this and giving it the precise name prompts the system to stop treating it as a page. Instead, it treats it and any child-pages as special repository folders. Do not place content in this 'Accordion' folder. See 2.

2. Next, create a hidden sub-section under the Accordion section you just created. Call this second subsection something to help you identify what it is about - for example, 'FAQ items' or 'Safety procedure items'. However, it MUST NOT be called 'Accordion'.

It should look something this:

The folder at the bottom level is where you will place your accordion items. In the example above, FAQ accordion items will go in the 'Items for accordion' folder.

 

---

Step two: Add accordion items

Accordion items are the content type that represent each clickable heading. So this is where your content goes like text and images.

1. Click on the blue Actions button for this folder and click Create content;

2. Click Accordion item from the list of content types, you can find this by typing 'accordion' in the Filter: box as shown below;

3. Fill in the form to add content to your accordion item, as below:

Name *	Give your accordion items a name, e.g. 'A - My first item; B - My second item' etc. This is for you and your colleagues reference only. Your users never see it. NB: The Up and Down ordering arrows do not work in the accordion so you need to use letters or numbers to manage the order of your items. For example, the first item should be named: A - My first item, the second item B - My second item, and the third: C - Third item; and so on. If you need more than 26 items in an accordion, name them A - ; AA - ; B - ; BB - ; and so on...
Item Title *	Enter the title for the item. This is the heading that appears on the grey bar;
Item Content *	Add content. The user will see this when they click the accordion;
Display item? *	Defaults to ticked to ensure this item displays.

4. Click Save and approve;

5. You will return to a screen which shows the accordion item you just created. Click 'Add content' and repeat steps 2-4 for each accordion item that you intend to include.

You've now built the items, the next step is to add the Accordion to the section (page) where you want it to appear.

---

Step three: Add the Accordion widget to the page where it will display

Set up your page to show an accordion by adding an Accordion widget to it. Follow these steps:

1. Open your site structure (you can do this by clicking the terminalfour logo in the top left of the screen), find the page where you want the accordion content to appear. In this example it is the About us page:

Click on the blue Actions button and select Create content.

2. Click Accordion widget from the list of content types, you can find this by typing 'accordion' in the Filter: as you did for accordion items.

Fill in the form:

Name *	Give your accordion widget a name, e.g. 'Accordion widget'. This is for your reference only. Your users never see this name.
Block Title*	Enter a title for your accordion. For example, 'Frequently asked questions'. The block title is a mandatory requirement. It makes the page accessible to visually-impaired users who use screenreaders to read web pages.
Show block title	If you want the 'block title' to appear to all users, put a tick in the 'Show block title' box. You can hide this title from users who are not visually impaired by deselecting this option.
Find items *	Tell the widget where it will find the items for this accordion. Press Add section link, then find and select the folder where you plan to add your items. This will be the hidden folder that you created under the 'Accordion' folder. In the previous screenshot we looked at, this folder is 'Items for accordion'.
Expand first item?	Tick this box and the first accordion item will be open when page loads. (Note: The default is unticked and so closed on page load)
Display items *	Tick this to ensure the accordion displays.

 

3. Click Save and approve

4. Publish the branch. You must publish both the Accordion sub-folder branch and the section (page) where the widget has been added for it to appear. In our example we would publish the whole About us branch as this includes the page which displays the content and the Accordion folders where the content was created.

Instructions on publishing your pages (making them live)

Add more than one accordion to your section (page)

You can add more than one accordion to a section (page).

You can see how each accordion has its own specific theme.  If you have lots of accordion items planned, it may be worth thinking about how they can be grouped into separate accordions to better organise the information on your page.  The better organised it is, the easier it is for the user to find it and for you to maintain it.

 

Remember, you can add as many accordions to your page as necessary, and in turn you can add as many accordion items to each accordion as appropriate.

It is a little tricky to set up, but once you get the hang of it you find you have a way to present your content that's visually appealing and organised in a way that makes information easy to find.