The Collapse plugin makes it easy to fold the page area. Whether you use it to create a collapsed navigation or a content panel, it allows for a lot of content options.
If you want to reference the functionality of the plugin individually, you need to reference collapse.js, or, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
The following table lists the Collapse plug-in for handling heavy scaling:
You can use the Collapse plugin in two ways:
Through data attribute: add data-toggle="collapse" and data-target to the element to automatically assign controls to collapsible elements. The data-target property accepts a CSS selector and applies 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 a folded panel-like grouping management to the foldable control, add the data property data-parent="#selector".
Through JavaScript : The collapse method can be activated through JavaScript, as shown below:
$('.collapse').collapse()
2. Examples
The content can be collapsed by clicking.
//Basic Example
<button data-toggle="collapse"data-target="#content"> Bootstrap</button><div id="content"> <div> Bootstrap is an open source toolkit for front-end development launched by Twitter. It was developed by Twitter designer Mark Otto and Jacob Thornton and is a CSS/HTML framework. Currently, the latest version of Bootstrap is 3.0. </div></div>
//Accordion folding
<div id="accordion"> <div> <div> <h4><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">Click me to display, then click me to fold, part 1</a></h4> </div> <div id="collapseOne"> <div> Here is the first part. </div> </div> </div> <div> <h4><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">Click me to display, then click me to fold, Part 2</a></h4> </div> <div id="collapseTwo"> <div> Here is the second part. </div> </div> </div> <div> <div> <h4><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Click me to display, then click me to fold, Part 3</a></h4> </div> <div id="collapseThree"> <div> Here is the third part. </div> </div> </div></div>
//Accordion effect
$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({ parent : '#accordion', toggle : false,});//Call manually
$('button').on('click', function() { $('#collapseOne').collapse({ toggle : true, });});//The collapse method also provides three parameters: hide, show, and 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.
//Events, other similarities
$('#collapseOne').on('show.bs.collapse', function() { alert('Free when the show method is called');});I hope this article will be helpful and inspiring to learn about the Bootstrap Collapse plug-in.