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.

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

An example of an accordion

Question one

You can use this space to add normal content. They're most effective when the content is really simple, just using them to break up a large page of text into bite size pieces.

As well as simple text you can also add images, links, tables, lists, videos or anything else you might have in a general content area. 

Question two

As well as simple text you can include other content like tables...

Column 1 Column 2 Column 3 Column 4
Here is some content This is some more content More text More text
Here is some content This is some more content More text More text
Here is some content This is some more content More text More text

Question three

Use images... or embed videos

The Queen's Tower

Give it a try

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' or 'Safety procedure'. However, it MUST NOT be called Accordion.

It should look something this:

A screenshot of an example of a t4 folder structure created to set up an accordion

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

Add accordion items

Accordion items are the content type that represent each clickable heading.

3. Select the drop down menu for this folder and click 'Add content';

4. Select 'Accordion item' from the list of content types;

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? * Keep this ticked to ensure this item displays.

5. Click Add and Approve;

6. You will return to a screen which shows the accordion item you just created. Click 'Add content' and repeat steps 7 - 9 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.

Add the Accordion 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:

7. Open your site structure, find the page where you want the accordion to appear and select 'Add content'.

8. Select the 'Accordion widget' content type. A form will appear:

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 'Select section', 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 'FAQ'.
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.

9. Click Add & Approve

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.

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.

Add more than one accordion to your section (page)

Adding additional accordions to your page

Add another subfolder to your structure

1.  Return to your site structure in t4.

2.  Find the page folder you are working with.

3.  Expand the page folder (i.e. press the (+) sign next to it) so that the child folder, 'Accordion' displays;

4.  Expand the grey 'Accordion' folder so that the folder with your 'Accordion items' displays.

You will see something like this:

Screenshot of site structure in t4


5.  Hover over the drop down menu for the 'Accordion' folder, and select 'Add section'.  Add another sub-section to the Accordion folder. Give the section a name to help identify it and remember to untick 'Show in navigation'.

In my example, I called my sub-section, 'About the team'.  You will now see something like this:

Another screenshot of a t4 site structure

Add items to your new grey subfolder

5. Add accordion items to your new grey subfolder.

If you keep your preview page open, you can refresh the page as you go and see each item appear as you add and approve it.

Add another widget to your page

6. Add an accordion widget to the page in question. This is where you added the first accordion widget.

7. Fill in the form for this new widget and point it to the new subfolder. In the screenshot above, I point it to the grey 'About the team' folder.

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.