Bootstrap Tutorial - Bootstrap Accordion Control








Accordion Control

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
<!-- w  w w.  j  a v a2  s  .c  o m-->
</head>
<body style='margin: 20px;'>
  <div class="accordion" id="accordion2">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse"
          data-parent="#accordion2" href="#collapseOne"> Collapsible
          Group Item #1 </a>
      </div>
      <div id="collapseOne" class="accordion-body collapse"
        style="height: 0px;">
        <div class="accordion-inner">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.</div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse"
          data-parent="#accordion2" href="#collapseTwo"> Collapsible
          Group Item #2 </a>
      </div>
      <div id="collapseTwo" class="accordion-body collapse"
        style="height: 0px;">
        <div class="accordion-inner">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.</div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse"
          data-parent="#accordion2" href="#collapseThree"> Collapsible
          Group Item #3 </a>
      </div>
      <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">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.</div>
      </div>
    </div>
  </div>


</body>
</html>

Click to view the demo