Skip to main content
T4 Support
  1. T4 Support
  2. Content type directory
  3. Accordion

Accordion

Accordions are a good way of presenting long, dense copy (eg FAQs and documents) in a compressed, user-friendly format. 

Accordion example

This is what an accordion looks like with some items closed and one open, displaying the information inside.

An accordion on a page with an item open

An accordion item displaying accommodation related FAQS.

Content types needed

To add an accordion to your page correctly, you need the following two content types enabled:

  • Accordion item
  • Accordion container

Steps

Step one - create an accordion container

  1. Select 'accordion - container' from the list of content types on the page where you want the accordion to appear.
  2. Fill out the relevant fields, but leave 'Additional Class' blank.
Accordion container

When you create your accordion container, leave Additional Class blank and save and approve your work.

Step two - create an Accordion item

  1. Select 'accordion - item' from the list of content types and fill out the relevant fields (which are asterisked).
  2. Give it a title that makes sense to your users. This will show on the heading of the accordion.
  3. Repeat with as many accordion items as you need.
Accordion item

The name you give the content type won't appear on the public webpage, only in T4.

Things to consider

  1. You can only add one accordion container per page. If you need more than this, use the 'reveal more' content type instead. It allows you to add multiple containers to a page.
  2. Copy inside the accordion items will not be picked up by Google or other search engines. Make sure all key SEO messaging is used in the general content item instead, with headings.

Availability

If you cannot add any of the content types mentioned, email websupport@qmul.ac.uk.

Examples

 

Back to top