Bootstrap folding (Collapse) plug-in _javascript skills every day

A folding (Collapse) plug-in can easily fold a page area. Whether you use it to create a collapsed navigation or a content panel, it allows a lot of content options.
If you want to refer to the plug-in's functionality separately, you need to refer to collapse.js, or, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to Bootstrap.js or compressed version of Bootstrap.min.js.
One, usage
The following table lists the folding (Collapse) plug-ins that are used to handle the heavy scalable class:

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

with the Data property: Add data-toggle= "collapse" and data-target to the element to automatically assign control of the collapsible element. The Data-target property accepts a CSS selector and applies a folding effect to it. Make sure to add class. Collapse to the collapsible element. If you want it to be open by default, add an extra class.
To add a group management similar to a collapsed panel to a collapsible control, add the Data property data-parent= "#selector."

JavaScript: The Collapse method can be activated via JavaScript, as follows:
$ ('. Collapse '). Collapse ()

Second, the example

You can collapse the content by clicking it.
Basic example

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

<div class= "collapse" id= "Content" >
 <div class= "OK" >
  Bootstrap is Twitter Launched an open source toolkit for front-end development. It
  was developed in collaboration with the Twitter designer Mark Otto and Jacob Thornton, a css/html framework. Currently, the latest version of Bootstrap is 3.0.
 </div>
</div>

Accordion Folding

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

   Gt 
 

Accordion effect

$ (' #collapseOne, #collapseTwo, #collapseThree, #collapseFour '). Collapse ({
 parent: ' #accordion ',
 Toggle: False,
}); 

Manually 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 of events in the Collapse plug-in.

Events, other similarities

$ (' #collapseOne '). On (' Show.bs.collapse ', function () {
 alert (' triggered ' when Show method calls);
};

I hope this article for you to learn bootstrap folding (Collapse) Plug-ins help, and inspire.