Bootstrap collapse

Bootstrap Collapse plugin

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 functionality of this plugin separately, then you need to reference collapse.js. You also need to reference the Transition plugin in your Bootstrap version. Alternatively, as mentioned in the Bootstrap plugin overview chapter, you can reference bootstrap.js or the minified version of bootstrap.min.js.

You can use the Collapse plugin:

Create collapsible groups or accordions , as shown below:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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">
          点击我进行展开，再次点击我进行折叠。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </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">
          点击我进行展开，再次点击我进行折叠。第 2 部分
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </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">
          点击我进行展开，再次点击我进行折叠。第 3 部分
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Run Instance»

Click "Run Instance" " button to view online examples

data-toggle="collapse" Add to the link of the component you want to expand or collapse. The
href or data-target attribute is added to the parent component, and its value is the id of the child component.
data-parent attribute adds the id of the accordion to the link of the component to be expanded or collapsed.

Create a simple collapsible component without accordion tag , as shown below:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 简单的可折叠组件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="collapse" 
   data-target="#demo">
   简单的可折叠组件
</button>

<div id="demo" class="collapse in">
  Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
  cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
  vice lomo.
</div>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

As you can see in the example, we created a collapsible component, and unlike the accordion, we did not add the attribute data-parent .

Usage

The following table lists the classes used by the Collapse plug-in to handle heavy scaling:

Class	Description	Instance
.collapse	Hide content.	Try it
.collapse.in	Display content.	Try it
.collapsing	is added when the transition effect starts and removed when the transition effect is completed.

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

Through the data attribute : Add data-toggle=" to the element collapse" and data-target, automatically assign controls to collapsible elements. The data-target property 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 additional class .in.
To add folding panel-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()

Options

Some options are passed through the data attribute or JavaScript. The following table lists these options:

Option Name	Type/Default Value	Data Property Name	Description
parent	selector Default value: false	data-parent	if Provides a selector that causes all collapsible elements under the specified parent element to be closed when a collapsible item is displayed. This behaves similarly to Accordion - this relies on the accordion-group class.
toggle	boolean Default value: true	data-toggle	Toggle call Foldable elements.

Methods

Here are some useful methods in the Collapse plugin:

Method	Description	Instance
Options: .collapse(options)	Activate content is available Collapse elements. Accepts an optional options object.	$('#identifier').collapse({ toggle: false })
Toggle: .collapse('toggle')	Toggle to show/hide collapsible elements.	$('#identifier').collapse('toggle')
Show: .collapse('show')	Show collapsible elements.	$('#identifier').collapse('show')
Hide: .collapse('hide')	Hide collapsible elements.	$('#identifier').collapse('hide')

Example

The following example demonstrates the usage of the method

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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">
               点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
            </a>
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-success">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo">
               点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree">
               点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-warning">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseFour">
               点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
            </a>
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>  

</body>
</html>

Running Example»

Click the "Run Instance" button to view the online instance

Events

The following table lists the events used in the Collapse plug-in. These events can be used as hooks in functions.

Event	Description	Instance
show.bs.collapse	This event is triggered after calling the show method.	$('#identifier').on('show.bs.collapse', function () { // 执行一些动作... })
shown.bs.collapse	This event is triggered when the collapsed element is visible to the user (will wait for the CSS transition effect to complete).	$('#identifier').on('shown.bs.collapse', function () { // 执行一些动作... })
hide.bs.collapse	This event is triggered immediately when the hide instance method is called.	$('#identifier').on('hide.bs.collapse', function () { // 执行一些动作... })
hidden.bs.collapse	This event is triggered when the collapsed element is hidden from the user (will wait for the CSS transition effect to complete).	$('#identifier').on('hidden.bs.collapse', function () { // 执行一些动作... })

Example

The following example demonstrates the usage of events:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠（Collapse）插件事件</title>
    <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
     <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseexample">
               点击我进行展开，再次点击我进行折叠。--shown 事件
            </a>
         </h4>
      </div>
      <div id="collapseexample" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. 
            Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
</div>

<script type="text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('嘿，当您展开时会提示本警告');})
   });
</script> 


</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Bootstrap collapse

Bootstrap Collapse plugin

Instance

Instance

Usage

Options

Methods

Example

Example

Events

Example

Example

php.cn