Accordions and tabs

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

Using accordions and tabs

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.

Tabs also contain large amounts of content. But there is often a relationship between each tab – for example, modules of a course or categories of jobs. A user might browse more than one tab, and browse within each one.

However, tabs, and the content in their headers, will be restricted by the width of a mobile screen. If you have longer titles, use accordions.

Large accordions

 

Small accordions

  • Title 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • Title 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 

Tabs

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.