Content types

  • Accordion widget
  • Accordion item

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 work well in this visually appealing layout.

You can add an unlimited amount of 'accordion items' to an accordion. Compare this to Tabs where you are limited to 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.

An example of an accordion

My first item

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. 

My second item

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

My third item

Use images...

The Queen's Tower

My fourth item

And videos!

Praesent sit amet bibendum neque. In a nunc eu justo condimentum sagittis at eu neque. Morbi id finibus purus, finibus accumsan dolor. Nullam eget scelerisque erat. Aliquam erat volutpat. Curabitur malesuada odio enim, sit amet auctor erat tempor eu. Aliquam ut mi faucibus, dignissim elit vitae, cursus magna. Sed mauris dolor, lobortis in massa at, feugiat sagittis orci. Morbi efficitur molestie turpis nec cursus.

Nunc tincidunt mi erat, pellentesque iaculis lacus efficitur et. 

 Ut finibus luctus magna eu luctus. Maecenas scelerisque, nulla eget condimentum lacinia, erat urna commodo odio, a suscipit lorem erat ut ex. Nam tincidunt aliquam felis non vestibulum. Proin cursus lorem quis odio euismod, quis volutpat lacus aliquam. Sed vehicula et erat nec interdum. Aliquam iaculis consequat dui, ut eleifend massa suscipit sed. Aliquam mi magna, malesuada id pulvinar sit amet, scelerisque vel ante. Vestibulum vitae euismod nisl, sit amet tincidunt nibh. Praesent quis ipsum justo. Morbi vitae magna in ipsum viverra placerat nec vel justo. Nulla fermentum hendrerit lorem, eget dapibus tortor. Duis tincidunt posuere ante a luctus.

In ullamcorper eros mauris, ac volutpat orci interdum in. Nam sed ipsum elementum, iaculis ex id, aliquam lectus. Aenean pharetra turpis vel lacus molestie, et vulputate purus finibus. Suspendisse eu neque eros. Ut ac mi vel odio porta cursus. Maecenas maximus vulputate erat, sed semper tortor tempor non. Sed nec tincidunt odio, id fringilla erat. Vivamus vel rhoncus nibh. Duis dictum porttitor nibh, eget volutpat nunc. Proin a purus in dolor ultrices pharetra.

My fifth item

You can add as many items to your accordion as you like.

You can also have more than one accordion on your page.  See how we have included a second accordion below.

Use this second example to find out how to add accordions to your page.

How to add an accordion to your page

Create hidden sections

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 subfolders.  Do not place content in this 'Accordion' folder.  You will see where your content goes later.

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.  More on this later.

Add a widget to your page

Before we add items to the accordion, you must tell your page that an accordion is on it.  The folder structure you have set up is not enough for the page to know to add an accordion.

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

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

4. 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 to expand first accordion item when page loads. (N.B The default is unticked and the first item is tehrefore closed on page load.)

Display items * Tick this to ensure the accordion displays.

5. Click Add & Approve

You have now told your page that an accordion sits on it.  You now need to populate your accordion with items.

Add accordion items

By this stage, you should have an empty accordion on your page.  If you preview your page, you won't see anything different, though. This is because you need to add items to the accordion.

Accordion items are the content type that represent each clickable heading.  Thus, in this accordion you are reading from now, 'Create hidden sections', 'Add a widget to your page' and 'Add accordion items' are made up of three separate accordion items.

To add items:

6. Go to your site structure, and find the folder that you set your widget to point to.  This will be the grey folder you created that sits under 'Accordion' folder. If we refer to the earlier example, we would select the 'FAQs' folder;

7. Select the drop down menue for this folder and click 'Add content';

8. 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.

9. Click Add and Appove;

10. 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 now have a complete accordion.  Refresh your page and review the results.

Now you know how to add an accordion to your page.  But what about adding more than one?  This is possible - this page has three accordions, for instance.

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.

Follow the instructions below for directions on adding more accordions to your 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 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.

Add items to your new grey subfolder

8. 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.

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.

If you find yourself getting confused, remind yourself:

'Accordion' - The name given to the style in which the information is presented on the page.

'Accordion widget' - The content type you use to add an accordion to your page.

'Accordion item' - The content type you use to add new accordion items.  Accordion items are added to your special grey folder.

Then re-read this page.