Accordions and tabs

Get accordion and tab components. Also find out how to use them and learn the key differences between these items.

Accordions

Accordions are useful for containing large amounts of content, where only a small amount of that content is relevant to a particular person.

An example of this is listing our undergraduate courses, where a user knows what kind of course they’re looking for.

However, accordions are not good for data tables, vast amounts of copy or components other than text.

In the new design, we will no longer be using small accordions. If you come across any (with the class="accordion small"), please make sure it reads as class="accordion" to replace with the standard accordion component.

 

Tabs

Tabs are challenging components to use, especially in regards to html and accessibility. We are phasing out tabs as part of the move to Drupal, so if you see any tabs please consider transitioning them to accordions, or another appropriate way to display the content.

Content 1

Content 2

 

Trouble with accordions or tabs

These components can be difficult to re-create if you’re not familiar with HTML code.

Email dcm@sussex.ac.uk if you need help.