Library Guides: Libguide Libguide: Accordions

Build and manage accordions

When and why to use accordions

Accordions stack content vertically and allow users to expand and collapse the relevant section. They are a great option to reduce the length of a page or box when you have lots of content that doesn't need to be seen all at once.

Note, to use an accordion you need to work within the HTML/source code for your box. If you are not comfortable doing this reach out to a Libguides WG team member or consider using a tabbed box instead (this is an example of a tabbed box).

Potential/recommended use cases:

text description for complex images and infographics
FAQs
multi-step, ordered processes

Example accordion

Example Header 1

Example Body 1

Example Header 2

Example Body 2

Example Header 3

Example Body 3

Example Header 4

Example Body 4

Example Header 5

Example Body 5

Demonstration videos

Building accordions requires working in HTML code.

We recommend you write your content in Word first. This way you will be able to plan your accordion and only build what you need.

After writing and formatting in Word use a text-to-HTML converter. You will then be able to copy and paste the HTML code for your body text into the accordion code in Libguides.

Instructions

copy the code below
open the HTML editor in the box you want to place your accordion. To do this select the edit icon in the bottom right corner of the box, then select </> html from the drop down.
paste in the code
replace the placeholder heading and body text with your converted HTML text [highlighted below]
if you only need one accordion add a 4th </div> at the end to close off the set of accordions [highlighted below]
save & close.

Code to copy

<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Example Header One<span class="glyphicon glyphicon-collapse-down pull-right"></span></a></h3>
</div>

<div aria-labelledby="heading1" class="panel-collapse collapse" id="example1" role="tabpanel">
<div class="panel-body">
<p>Example Body One</p>
</div>
</div>
</div>

Example of edited code in Libguide box

<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Accordion heading<span class="glyphicon glyphicon-collapse-down pull-right"></span></a></h3>
</div>

<div aria-labelledby="heading1" class="panel-collapse collapse" id="example1" role="tabpanel">
<div class="panel-body">
<p>Paragraph of text</p>
</div>
</div>
</div>
</div>

Instructions

copy code below
paste it into the box beneath your code for the previous accordion
update each instance of "example1" and "heading1" to the appropriate number for the accordion in your series
replace the placeholder heading and body HTML text from your converter
repeat steps 1-4 as needed
ensure there is a 4th </div> at the end of your code to close off the entire accordion set
save & close

Note: If you are planning to have more than one set of accordions on your page the "exampleX" and "headingX" do not restart at 1 for the subsequent sets. Continue sequentially from the previous accordion set.

Code to copy

<div aria-labelledby="heading1" class="panel-collapse collapse" id="example1" role="tabpanel">
<div class="panel-body">
<p>Example Body One</p>
</div>
</div>
</div>

Example code: initial accordion with two additional accordions

<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h3 class="panel-title"><a aria-controls="example1" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example1" role="button">Accordion heading<span class="glyphicon glyphicon-collapse-down pull-right"></span></a></h3>
</div>

<div aria-labelledby="heading1" class="panel-collapse collapse" id="example1" role="tabpanel">
<div class="panel-body">
<p>Paragraph of text</p>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" id="heading2" role="tab">
<h3 class="panel-title"><a aria-controls="example2" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Header Two<span class="glyphicon glyphicon-collapse-down pull-right"></span></a></h3>
</div>

<div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
<div class="panel-body">
<p>Example Body Two</p>
</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" id="heading3" role="tab">
<h3 class="panel-title"><a aria-controls="example3" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Header Three<span class="glyphicon glyphicon-collapse-down pull-right"></span></a></h3>
</div>

<div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
<div class="panel-body">
<p>Example Body Three</p>
</div>
</div>
</div>
</div>

If you need to edit or remove one or more accordions this has to be done in the source code. DO NOT simply replace or delete the text in the rich text editor.

Instructions for deleting accordions

Open the html editor/source code for the box
Highlight the code and delete it. Make sure you have selected the full division/s for your accordion/s
Check there is still a 4th </div> at the end of the code
If required, update the numbers of the "headingX" and "exampleX" in the code so all accordions are numbered sequentially.