Accordion

The ll-accordion shortcode, places an accordion onto a Learning lab page. Accordions can be a useful tool in dividing and segmenting information, if used judiciously.

By default, the accordion is labelled "transcript". It's important to change this by adding title="Accordion title". Change "Accordion title" to whatever is appropriate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.

Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

[ll-accordion title="Accordion title"]<p>Accordion content here.</p>[/ll-accordion]

Preserving heading hierarchy

Maintaining a clear heading hierarchy is crucial for accessibility. Headings should start at <h1> and nest logically (e.g., <h2>, <h3>).

By default, the accordion shortcode uses <h2>. If your accordions are nested under another heading, adjust this using the heading-tag attribute.

[ll-accordion title="Accordion Title 1" heading-tag="h3"]
<p>Accordion content here.</p>
[/ll-accordion]

In this example, the accordion title will use an <h3> tag, preserving the heading hierarchy.

Grouping accordions

To display a group of accordions, wrap them in a div with class accordion:

<div class="accordion">
[ll-accordion title="Accordion title 1"]<p>Accordion content here.</p>[/ll-accordion]
[ll-accordion title="Accordion title 2"]<p>Accordion content here.</p>[/ll-accordion]
[ll-accordion title="Accordion title 3"]<p>Accordion content here.</p>[/ll-accordion]
</div>

Open by default

It's possible to have an accordion item open by default. Use open="true" Use sparingly and only in a group of accordions.


<div class="accordion">
[ll-accordion title="Accordion title 1" open="true"]<p>Accordion content here.</p>[/ll-accordion]
[ll-accordion title="Accordion title 2"]<p>Accordion content here.</p>[/ll-accordion]
[ll-accordion title="Accordion title 3"]<p>Accordion content here.</p>[/ll-accordion]
</div>

Keywords

Documentation

Learning Lab homepage

Accordion

Preserving heading hierarchy

Grouping accordions

Open by default

Keywords

Ask the Library

Acknowledgement of Country