Tutorial on Bootstrap 3 Collapse & Accordion

A collapse and accordion is a hide panel or portion which is opened on click on a button or link with scrolling effect. Now start to learn Bootstrap Collapse and Accordion.

Basic Collapse

to make a basic collapse in bootstrap 3 need to use data-toggle="collapse" and data-target="#collapse_demo" in a button or link where collapse_demo is the shoe hisde div and use classname .collapse on the show hide div

Ecample:

Try it yourself

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

By default the collapsible content is hidden. if you want to show the content of the collapsable div you can add .in class vlass name on the collapse div

Example:

 

Try it yourself

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>

Collapsible Panel

A collapsible panel is collapsible portion with header footer and body where header and footer have a gray background and when the panel is collapse it shows only the panel heading . To make a panel group first take a div with class name .panel-group now inside that you can use multiple panel with panel type to make that use class name .panel .panel-default you can replace .panel-default with .panel-info or .panel-success etc tomake different header and footer color

Example:

 

Try it yourself

<div class="panel-group">
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>

  <div class="panel panel-success">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse2">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>

</div>

Collapsible List Group

A bootstrap 3 collapsible list group like bootstrap collapsible panel where inside panel body there is a ordered or unordered list.

Example

 

Try it yourself

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

Bootstrap 3 Accordion

Bootstrap 3 Accordion are used on the websites to manage the big quantity of content and navigation lists. With Bootstrap collapse plugin you’ll be able to either produce accordion or a straightforward folding panel while not writing any JavaScript code.

Example

 

Try it yourself

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

In this post we have learned about Bootstrap Collapse and Accordion hope that it helped you and please provide your comment to make the site better.

Thanks for reading