Accordions allow users to group larger sections of related content into a compressed space.

Basic HTML knowledge is required to use this component.

H5P offers an alternative to this component, and may be the preferred option for some users.

To check that accordions are the appropriate tool for your use refer to How to use accordions well.

Example

Accordion 1

Accordion 1 content goes here.

Accordion 2

Accordion 2 content goes here

Accordion 3

Accordion 3 content goes here

Accordion 4

Accordion 4 content goes here

HTML code

<div class="uom-ui-accordion">

    <div class="uom-ui-accordion-trigger">
        <span class="uom-ui-accordion-title">Accordion 1</span>
    </div>
    <div class="uom-ui-accordion-panel">Accordion 1 content goes here</div>

    <div class="uom-ui-accordion-trigger">
       <span class="uom-ui-accordion-title">Accordion 2</span>
    </div>
    <div class="uom-ui-accordion-panel">Accordion 2 content goes here</div>

    <div class="uom-ui-accordion-trigger">
       <span class="uom-ui-accordion-title">Accordion 3</span>
    </div>
    <div class="uom-ui-accordion-panel">Accordion 3 content goes here</div>

    <div class="uom-ui-accordion-trigger">
       <span class="uom-ui-accordion-title">Accordion 4</span>
    </div>
    <div class="uom-ui-accordion-panel">Accordion 4 content goes here</div>

</div>

Instructions

Adding an accordion to your subject

Select the code in the grey HTML code box above, then copy it.
In your Canvas Subject, open or create the page you want to add the accordion to.
Click the Edit button.
Open the raw HTML editor by clicking the </> icon, located below the Rich Content Editor window on the right-hand side.
Paste the copied code into the raw HTML editor.

Updating accordion text

For each accordion, you need to replace the title and panel text.

Open the page you added the accordion code to.
Click the Edit button.
Open the raw HTML editor by clicking the </> icon, located below the Rich Content Editor window on the right-hand side.
To update the accordion title text, replace 'Accordion 1' (the yellow highlighted text) with your own text.
Ensure you do not delete the angled brackets on either side of the text - doing so will break the accordion!
To update the accordion panel text, replace 'Accordion 1 content goes here' (the green highlighted text) with your own text.
Ensure you do not delete the angled brackets on either side of the text - doing so will break the accordion!
To add an additional accordion, copy the blue highlighted text, then paste between the end of the blue highlighted text and the final </div> tag.