Skip to main content

Accordions

On this page

Overview

Accordions should be used sparingly if possible. Although the accordions available to use on University sites will be accessible, they will always risk causing users difficulty as interaction is necessary to see the information.

Always use the buttons or features provided in a content management system (CMS), typically Jadu or WordPress, to create an accordion. Never use your own code to set an accordion. This will ensure they are accessible.

Accordions will have pre-set header numbers. Please see our guidance on headings for more information to make sure your heading structure meets accessibility requirements.

What and why: An accordion is a vertically stacked container with a title and some content. Accordions are used to make navigating a page easier and to reduce the need for scrolling.

A finished accordion displayed on a page with the third item, a video, expanded.

Return to the top of the page.

How to

 Accordions for Jadu users

How to create an accordion in older versions of Jadu

Some older instances of Jadu in the University require accordions to be set using HTML. We recommend most content owners/creators to not edit HTML and instead to consider reorganising their content and use headings accessibly.

How to create an accordion in Jadu Continuum

  1. Place your cursor in the place where you would like the first accordion header to be.
  2. Select the accordion icon in the menu bar.
  3. Add in the header in the ‘Title Text’ field and the content for the accordion panel in the ‘Body Text’ field.A basic accordion item showing areas for its title and contents.
  4. To add another accordion header and panel underneath, just place your cursor directly underneath the first accordion content you made and select the accordion button Jadu again.

Return to the top of the page.

Accordions for WordPress users

To create an accordion in WordPress, first make sure that you are using the ‘Widgets Page Template’. This can be selected under the 'Template' drop-down in the Page Attributes box in the editor page.

Be aware that changing the template after adding content to your page can put that content at risk. We'd recommend copying your content into Notepad and saving it as a back-up before changing the template.

  1. Select the 'Add Widget' button, then choose 'Accordion Widget'.Adding an accordion widget to a page in the Widget Template Page using the Add Widget button.
  2. An empty Accordion Item container will be displayed on the page.
  3. You can add a header for the accordion section in the 'Title' field. The optional 'Lead' field allows you to add some useful information.An accordion in the editor page. It has a space for a heading and a space for a description before you add accordion items.
  4. Select the ‘Add Accordion Item’ button. Add the accordion header in the 'title' field and the content in the 'content' field.Adding an accordion item to the accordion container using WordPress

Return to the top of the page.

Accordions for SharePoint users

SharePoint's version of accordions is collapsible sections. It's not possible to create an accordion in a subsection of a larger section. Either the whole section is collapsible or none of it is.

Collapsible sections must be given a 'Section name' that SharePoint will set as a Heading 2. It's not possible to change the heading level. Ensure that any headings you use within this section follow the appropriate hierarchy, as explained in our headings guidance.

How to create a collapsible section (accordion) in SharePoint

  1. Select 'Edit section' in the section toolbar.
  2. Set the toggle for 'Make this section collapsible' to 'On' in the 'Section' options panel.
  3. If you would like the section to be collapsed so its content is hidden when someone loads the page, set the toggle for 'Default display' to 'Collapsed'.
  4. Write the section heading in the 'Section name' field in the page editor.