Skip to Main Content
Library of Congress Research Guides

LibGuides Manual

Accordion Coding

There are occasions when your presentation of content could benefit from the use of boxes that can open and close so you can open the boxes only then you need the content within, This coding is part of Bootstrap 3, therefore, built into LibGuides,

Accordion (Collapse UI) is a part of Bootstrap 3 Library, therefore only thing that's required is a markup. The example below, from the bootstrap page: https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion, shows a very simple accordion with three sections.

Instructions for using the markup:

  1. Replace all "changeme" throughout the coding with a unique id per group.
  2. If you have more than three items, repeat the <div class="panel panel-default"> then update the order number for both heading and collapse. ex. changeme-collapse-three to changeme-collapse-five, changeme-heading-three to changeme-heading-four

Coding Sample

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Code

<div aria-multiselectable="true" class="panel-group" id="changeme" role="tablist">

<div class="panel panel-default">
<div class="panel-heading" id="changeme-heading-one" role="tab">
<h4 class="panel-title"><a aria-controls="changeme-collapse-one" aria-expanded="true" data-parent="#changeme" data-toggle="collapse" href="#changeme-collapse-one" role="button">Collapsible Group Item #1</a></h4>
</div>

<div aria-labelledby="changeme-heading-one" class="panel-collapse collapse in" id="changeme-collapse-one" role="tabpanel">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" id="changeme-heading-two" role="tab">
<h4 class="panel-title"><a aria-controls="changeme-collapse-two" aria-expanded="false" class="collapsed" data-parent="#changeme" data-toggle="collapse" href="#changeme-collapse-two" role="button">Collapsible Group Item #2 </a></h4>
</div>

<div aria-labelledby="changeme-heading-two" class="panel-collapse collapse" id="changeme-collapse-two" role="tabpanel">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" id="changeme-heading-three" role="tab">
<h4 class="panel-title"><a aria-controls="changeme-collapse-three" aria-expanded="false" class="collapsed" data-parent="#changeme" data-toggle="collapse" href="#changeme-collapse-three" role="button">Collapsible Group Item #3 </a></h4>
</div>

<div aria-labelledby="changeme-heading-three" class="panel-collapse collapse" id="changeme-collapse-three" role="tabpanel">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&#39;t heard of them accusamus labore sustainable VHS.</div>
</div>
</div>


</div>
 

Subjects: Education, Staff Guides
Hosted by Springshare
Library of Congress Legal SpringShare Privacy Policy