The Collapse plug-in that Bootstrap must learn every day_javascript skills

The Collapse plugin makes it easy to collapse page areas. Whether you use it to create accordion navigation or content panels, it allows for a lot of content options.
If you want to reference the plugin's functionality alone, then you need to reference collapse.js, or, as mentioned in the chapter Bootstrap Plugin Overview , you can reference bootstrap.js Or a compressed version of bootstrap.min.js.
1. Usage
The following table lists the classes used by the Collapse plugin to handle heavy scaling:

You can use the Collapse plugin in the following two ways:

Automatically assign control for collapsible elements by adding data-toggle="collapse" and data-target to the element via the data attribute: . The data-target attribute accepts a CSS selector and will apply a collapse effect to it. Make sure to add class .collapse to the collapsible element. If you want it to be on by default, add an extra class .in.
To add accordion-like grouping management to a collapsible control, add the data attribute data-parent="#selector".

Via JavaScript: The collapse method can be activated via JavaScript as follows:
$('.collapse').collapse()

2. Examples

Collapse content by clicking on it.
//Basic example

<button class="btn btn-primary" data-toggle="collapse"
data-target="#content">
 Bootstrap
</button>

<div class="collapse" id="content">
 <div class="well">
  Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
  Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0 。
 </div>
</div>

//Accordion fold

<div class="panel-group" id="accordion">
 <div class="panel panel-default">
  <div class="panel-heading">

   <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第一部分</a></h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
   <div class="panel-body">
    这里是第一部分。
   </div>
  </div>
 </div>

 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第二部分</a></h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body">
    这里是第二部分。
   </div>
  </div>
 </div>

 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示，再点击我进行折叠，第三部分</a></h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body">
    这里是第三部分。
   </div>
  </div>
 </div>
</div>

//Accordion effect

$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({
 parent : '#accordion',
 toggle : false,
}); 

//Manual call

$('button').on('click', function() {
 $('#collapseOne').collapse({
  toggle : true,
 });
}); 

//The collapse method also provides three parameters: hide, show, toggle.

$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
$('button').on('click', function() {
 $('#collapseOne').collapse('toggle');
}); 

There are four types of events in the Collapse plug-in.

//Event, other similar

$('#collapseOne').on('show.bs.collapse', function() {
 alert('当 show 方法调用时触发');
});

I hope this article will be helpful and inspiring for everyone to learn the Bootstrap Collapse plug-in.