Technical Services Guide for Staff: LibGuides

• Overview
• Best Practices
• Short Cuts
• Hacks

Collapsing Using Panel Accordion

A collapsing accordion of panels shows only one panel out of many. When a panel heading is selected, the one panel tied to that heading is revealed while all others are hidden. This feature is very useful for FAQs where the user only sees the answer to the question they desire.

 

Code with Explanations

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
  <div class="panel panel-warning">
    <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 One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
      <div class="panel-body">
        <p>Example One Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading2" role="tab">
      <h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
      <div class="panel-body">
        <p>Example Two Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading3" role="tab">
      <h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
      <div class="panel-body">
        <p>Example Three Body</p>
      </div>
    </div>
  </div>
</div>

Code for Copying

<div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist">
  <div class="panel panel-warning">
    <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 One Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading1" class="panel-collapse collapse in" id="example1" role="tabpanel">
      <div class="panel-body">
        <p>Example One Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading2" role="tab">
      <h3 class="panel-title"><a aria-controls="example2" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example2" role="button">Example Two Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading2" class="panel-collapse collapse" id="example2" role="tabpanel">
      <div class="panel-body">
        <p>Example Two Body</p>
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" id="heading3" role="tab">
      <h3 class="panel-title"><a aria-controls="example3" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#example3" role="button">Example Three Heading <span class="glyphicon glyphicon-collapse-down"></span></a></h3>
    </div>
    <div aria-labelledby="heading3" class="panel-collapse collapse" id="example3" role="tabpanel">
      <div class="panel-body">
        <p>Example Three Body</p>
      </div>
    </div>
  </div>
</div>

Customization

The default collapsing panel only allows the heading text to be clickable. I have created custom CSS to ensure the entire heading is clickable.

Custom Code

div.panel-group div.panel-heading a{text-decoration:none;display:block;padding:10px 15px;}

div.panel-group div.panel-heading a:focus,div.panel-group div.panel-heading a:hover{box-shadow:0 0 1.5px 1.5px grey}

div.panel-group .panel-heading{padding:0}

https://infoguides.wtamu.edu/bootstrap/buttons