On this page
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.
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
- Place your cursor in the place where you would like the first accordion header to be.
- Select the accordion icon in the menu bar.
- Add in the header in the ‘Title Text’ field and the content for the accordion panel in the ‘Body Text’ field.
- 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.
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.
- Select the ‘Add Widget’ button, then choose ‘Accordion Widget’.
- An empty Accordion Item container will be displayed on the page.
- You can add a header for the accordion section in the ‘Title’ field. The optional ‘Lead’ field allows you to add some useful information.
- Select the ‘Add Accordion Item’ button. Add the accordion header in the ‘title’ field and the content in the ‘content’ field.