Tabbed and accordion layouts

This page uses tabbed and accordion layout to illustrate how these work.

Tabbed example

What are they?

Two new content layouts allow you to present your content in a tabbed or accordion format on the page. This can be a good way to compress a lot of information onto a single page and reduce clutter in the left menu.

Examples of how you might use these include:

  • As a course page listing
  • A staff profile page
  • A event information page
  • To walk someone through a step-by-step process
How to insert tabs or an accordion
  1. Tabs/accordion in the CMS editor screenCreate or open up the page where you would like to put a tabbed or accordion layout
  2. The new layouts are inserted in the same way as you would a normal content layout: press the top left Layouts button in the editor toolbar and choose one of the new layouts at the bottom of the list
  3. A green table will be inserted on the page. The content for both layouts is displayed in a linear table style - when you preview or publish it will display in tabbed or accordion format
  4. Edit the text that is used for the tab or accordion panel header in the left column of the table
  5. Edit the content for that tab or accordion panel header in the corresponding right column of the table. You should be able to insert any content into this table cell, including text, images, videos, quotes, styled boxes and page layouts
  6. Add or remove a row by putting your cursor in the left cell of an adjacent row, right clicking and selecting Row >...
  7. Add or remove a whole layout by right-clicking and selecting Delete layout
  8. Save and publish as normal when you are ready
Examples of content

You should be able to insert any content on a tab or accordion panel, in the same way that you would on a normal page. Some examples are below.

The University of Sheffield

Students on grass outside Students' Union

We're a member of the Russell Group of leading UK research universities. Our outstanding performance for excellent teaching and research, as part of a genuinely global community, is consistently confirmed by international independent assessments.

A text link

A button link

Highlight box (complementary)

More body text here.

Highlight box (neutral)

More body text here.

Feature box

More body text here.

A normal quote, which is right-aligned on desktop and tablet views

Jane Smith

This quote is within a layout table, meaning that it stretches the full width of the page on all views. You need to make sure it is long enough to fill at least one line.

Jane Smith

Things to consider
  • Think carefully about your header titles and make sure that they’re meaningful as someone reading your page will be using just these words to decide whether or not to reveal the information on the tab/panel. Keep each title to three words maximum
  • Don't hide your most important content or most crucial call to action on a deeper tab/panel
  • If you want to increase the chances of someone scanning all the content on your page, don't use tabs or an accordian - instead just present your content on a single page
  • On mobile view, the tabbed layout appears in accordion style to make it easier for users to navigate
  • You can link directly to a tab by adding #tab00 to the end of the full page web address, where 00 is the number of the tab. The first tab is 00, the second 01, the third 02 etc. So to link to this tab you would use https://www.sheffield.ac.uk/web/effective/cms-guidelines/tabbed-accordion-layouts#tab03
  • We advise against using more than one tabbed or accordion layout on a single page. Also, if you have two tabbed content layouts on a page, you can only directly link to a specific tab on the first one
  • Never put one tab or accordion layout within another, as this will cause them to break
  • Google Analytics will track the content within a layout as a single page, not as separate pages. So you’ll only get data for the page as a whole

Accordion example

The example below contains the same content as the tabbed version above. This is just for demonstration purposes. We wouldn't normally recommend putting more than one tabbed or accordion layout on a single page.

What are they?

Two new content layouts allow you to present your content in a tabbed or accordion format on the page. This can be a good way to compress a lot of information onto a single page and reduce clutter in the left menu.

Examples of how you might use these include:

  • As a course page listing
  • A staff profile page
  • A event information page
  • To walk someone through a step-by-step process
How to insert tabs or an accordion
  1. Tabs/accordion in the CMS editor screenCreate or open up the page where you would like to put a tabbed or accordion layout
  2. The new layouts are inserted in the same way as you would a normal content layout: press the top left Layouts button in the editor toolbar and choose one of the new layouts at the bottom of the list
  3. A green table will be inserted on the page. The content for both layouts is displayed in a linear table style - when you preview or publish it will display in tabbed or accordion format
  4. Edit the text that is used for the tab or accordion panel header in the left column of the table
  5. Edit the content for that tab or accordion panel header in the corresponding right column of the table. You should be able to insert any content into this table cell, including text, images, videos, quotes, styled boxes and page layouts
  6. Add or remove a row by putting your cursor in the left cell of an adjacent row, right clicking and selecting Row >...
  7. Add or remove a whole layout by right-clicking and selecting Delete layout
  8. Save and publish as normal when you are ready
Examples of content

You should be able to insert any content on a tab or accordion panel, in the same way that you would on a normal page. Some examples are below.

The University of Sheffield

Students on grass outside Students' Union

We're a member of the Russell Group of leading UK research universities. Our outstanding performance for excellent teaching and research, as part of a genuinely global community, is consistently confirmed by international independent assessments.

A text link

A button link

Highlight box (complementary)

More body text here.

Highlight box (neutral)

More body text here.

Feature box

More body text here.

A normal quote, which is right-aligned on desktop and tablet views

Jane Smith

This quote is within a layout table, meaning that it stretches the full width of the page on all views. You need to make sure it is long enough to fill at least one line.

Jane Smith

Things to consider
  • Think carefully about your header titles and make sure that they’re meaningful as someone reading your page will be using just these words to decide whether or not to reveal the information on the tab/panel. Keep each title to three words maximum
  • Don't hide your most important content or most crucial call to action on a deeper tab/panel
  • If you want to increase the chances of someone scanning all the content on your page, don't use tabs or an accordian - instead just present your content on a single page
  • On mobile view, the tabbed layout appears in accordion style to make it easier for users to navigate
  • You can link directly to a tab by adding #tab00 to the end of the full page web address, where 00 is the number of the tab. The first tab is 00, the second 01, the third 02 etc. So to link to this tab you would use https://www.sheffield.ac.uk/web/effective/cms-guidelines/tabbed-accordion-layouts#tab03
  • We advise against using more than one tabbed or accordion layout on a single page. Also, if you have two tabbed content layouts on a page, you can only directly link to a specific tab on the first one
  • Never put one tab or accordion layout within another, as this will cause them to break
  • Google Analytics will track the content within a layout as a single page, not as separate pages. So you’ll only get data for the page as a whole