Detailed Explanation of bootstrap Accordion Making Method

Accordion (Collapse) effect display

Collapse plug-in (folding) in Bootstrap framework is actually our common accordion effect. Click on the title to show or hide its corresponding content

<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="#collapseOne"> Title 1</a></h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-body"> Title 1 Corresponding content </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Title 2</a></h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body"> Title 2 Corresponding content </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree"> Title 3</a></h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body"> Title 3 Corresponding content </div>
  </div>
 </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Accordion accordion structure

The most critical part of accordion is that each title corresponds to one content. Combining these two parts in Bootstrap framework is called one panel page. As shown in the effect on the right, he has three panel panels. Combining these three panels into one is a panel combination panel-group, which is the structure of accordion.

The simple point is one trigger and one collapse area:

< button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" > Trigger < /button >
< div id="demo" class="collapse in" > Folding area < /div >

Accordion Declarative Trigger Accordion (2)

Step 3, in order to bind the title and content area in 1, you can connect the title area and the panel area in 1 by anchor link:

Step 4: Control whether the content area of the panel is visible. In the Bootstrap framework, if you want to make the content area invisible, just add collapse to the panel-collapse style:

The content area of each panel is hidden and becomes invisible, but sometimes you want the content of the first panel to be visible by default.
You only need to add in style to collapse:

Accordion Declarative Trigger Accordion (3)

Step 5: Activate accordion interaction. To complete the interactive behavior, you need to customize two attributes in the title link, one is data-toggle, and the value is collapse;; The other one is data-target, which takes the identifier of each panel content area, such as ID.

Note: In this case, it is OK not to add data-target= "# panel1", because href= "# panel1" already exists, but if button button is used as trigger, data-target= "# panel1" statement must be used.

Step 6: Define the data-parent attribute, so that when one element of one is clicked, all collapsed areas are closed, and then the clicked area is opened (if the clicked area is displayed, it will be closed). This data-parent value matches the identifier of the accordion panel container, such as # myAccordion in this example

<div class="panel-group" id="myAccordion">
 <div class="panel panel-accordion panel-default">
  <div class="panel-heading">
   <h4 class="panel-title">
    <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion"> Title 1</a>
   </h4>
  </div>

☑ uses panel-title of panel as touch element and parent element of panel-body as folding area.
☑ uses one panel-group to contain multiple panel to achieve accordion effect;
Every trigger element in ☑ panel must specify data-parent attribute;
The value of the ☑ data-parent attribute corresponds to the ID or other style identifier of the panel-group style element;
The ☑ trigger element needs to specify data-toggle and the value is collapse;
☑ trigger elements must specify data-target attributes;
The value of the ☑ data-target attribute corresponds to the ID or other style identifier of the parent element of panel-body.