Using Bootstrap in LibGuides

<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>

<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>

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}

For further information on collapsing elements using buttons and links, see the following sites for further information

• Bootstrap
• w3cschools