Bootstrap fold (Collapse) widget

Folding (Collapse) plug-ins can easily be folded so that area of ​​the page. Whether you use it to create content or collapse the navigation panel, which allows a lot of content options.

If you want to refer to the individual plug-in features, you need to referencecollapse.js.At the same time, also you need to refer to your version of Bootstrap in Transition (transition) plug . Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.

You can use the fold (Collapse) plug-in:

• Create a packet or collapsible accordion (accordion),as follows:

  Examples

  <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"> Click me are expanded, click I folded again. Part 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"> Click me are expanded, click I folded again. Part 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"> Click me are expanded, click I folded again. Part 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>

  
  try it"

  The results are as follows:

  
  1. data-toggle = "collapse" of the components added to the link you want to expand or collapse on.
  2. href or data-targetattribute to the parent component, its value isidsubcomponents.
  3. data-parent property to add accordion (accordion) to the id To expand or collapse the link assembly.
• Create a simple mark without accordion folding assembly (collapsible),as shown below:

  Examples

  <Button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo"> simple folding assembly </ 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>

  
  try it"

  The results are as follows:

  

  As you can see in the example, we created a collapsible assemblies, and panel folding (accordion) different, we do not add the attributedata-parent.

usage

The following table lists the class fold (Collapse) plug-in for processing heavy retractable:

You can use the fold (Collapse) plug-in in two ways:

• Through data attributes: add data-toggle = "collapse"anddata-targetto element, automatic distribution control collapsible elements.data-target attribute accepts a CSS selector, and their applications will fold effect.Make sure to addclass .collapse collapsible elements.If you want it to be open by default, add an extraclass .in.

  To add packet management similar to a collapsible accordion controls, add a data attributedata-parent = "# selector" .

• By JavaScript: to activate the collapse method JavaScript, as follows:

  $ ( '. Collapse'). Collapse ()
  

Options

There are some options through data attributes or JavaScript to pass. The following table lists these options:

method

Here are some folded (Collapse) plug-in useful ways:

$('#identifier').collapse({
	toggle: false
})

$('#identifier').collapse('toggle')

$('#identifier').collapse('show')

$('#identifier').collapse('hide')

Examples

The following example demonstrates the method:

The results are as follows:

event

The following table lists the fold (Collapse) plug-in to be used in the event. These events can be used when the hook function.

$('#identifier').on('show.bs.collapse', function () {
	// 执行一些动作...
})

$('#identifier').on('shown.bs.collapse', function () {
	// 执行一些动作...
})

$('#identifier').on('hide.bs.collapse', function () {
	// 执行一些动作...
})

$('#identifier').on('hidden.bs.collapse', function () {
	// 执行一些动作...
})

Examples

The following example demonstrates the usage of the event:

The results are as follows: