Every day, Bootstrap is required to fold.

Every day, Bootstrap is required to fold.

This article mainly describes the JavaScript plug-in-fold.
1. Transition Effect
About transition effect
For the simple transition effect, you only need to introduce transition. js and other JS files. If you are using a compiled (or compressed) bootstrap. js file, you do not need to introduce it separately.
What's inside
Transition. js is a basic helper tool for the is a basic helper for transitionEnd event, and it also simulates the CSS Transition effect. It is used by other plug-ins to check whether the current browser supports the CSS transition effect.
2. Fold
Provides basic styles and flexible support for components that support folding, such as accordions and navigation.

Plugin dependency

The folding plug-in depends on the transition effect plug-in.

Case
A simple accordion component is built by extending the panel component using the folding plug-in.
Let's take a look at the effect.

Next, let's take a look at the implementation of the Code.

<div class="container" style="margin-top:140px;">  <div class="panel-group" id="accordion">  <div class="panel panel-default">  <div class="panel-heading">   

Step 1: first, the panel-group layer on the outermost layer contains several groups.
Step 2: Take a look at some simple groups

<div class="panel panel-default"> <div class="panel-heading">  

The Code clearly shows the structure of a panel.
Panel-header and pandl-body, and then the panel-header can contain the title and link. Connect to the panel-body through the link.
Step 3: you can find that there is an id = "accordion" in the panel-group, and there is a data-parent = "# accordion" in each of the links below ".
If this is removed, the effect is that after clicking another link, the original panel will not be reduced.
You can show the folding effect in another way.

 <div class="container" style="margin-top:140px;"> <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"> simple collapsible </button><div id="demo" class="collapse in">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>

Usage
The folding plug-in controls styles through several simple classes
. Collapse hidden content
. Collapse in display content
. Collapsing. It is added when the transition starts, and removed when it finishes probably means that the transition effect will be available after the fold is added, and It will end if it is removed.
Data attributes
Only by adding data-toggle = "collapse" and data-target to the page element can you grant it the ability to control the foldable page element. The data-target attribute accepts a CSS selector as its control object. Make sure to add collapse class to the foldable page element. If you want to expand the default status of the tab elements, add in class.
To add controllers to a group of foldable page elements, add data-parent = "# selector. Refer to the example above.
Using JavaScript

<Button type = "button" class = "btn-danger" onClick = "Open () "> open </button> <button type =" button "class =" btn-danger "onClick =" Hide () "> collapse </button> <div id =" demo "class =" collapse in "> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry Richard dson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. food truck quinoa nesciunt manuum eiusmod. brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. ad vegan deleteur butcher vice lomo. leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven' t heard of them accusamus labore sustainable VHS. </div> <div class = "panel-group" id = "accordion" style = "margin-top: 240px;">
 <script type="text/javascript"> $(function(){   $("#demo").collapse({ toggle: false })  })   function Open(){  $("#demo").collapse("show");  } function Hide(){  $("#demo").collapse("hide");  } </script>
Let's take a look at the above results.

Method
Grant the page element folding function. An optional object is used as a parameter.
$ ("# Demo"). collapse ({toggle: false })
In this way, the elements are expanded during initialization.
1. collapse ('toggle ') shows or hides a foldable page element.
2. collapse ('show ') shows a foldable page element.
3. collapse ('hide ') hides a foldable page element.
Event
The folding plug-in Bootstrap exposes a group of events that can be monitored.

In this way, the hidden event is bound to the element.
The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

  

 
   
Every day, Bootstrap must learn the grid system (layout)
 
   
Bootstrap daily required drop-down menu
 
   
Every day, Bootstrap is required.
 
   
Every day, Bootstrap must learn
 
   
Navigation bar required by Bootstrap every day
 
   
Tags and badges that Bootstrap must learn every day
 
   
Thumbnails and warning windows that Bootstrap must learn every day
 
   
Progress bar that Bootstrap must learn every day
 
   
Daily required panel of Bootstrap
 
   
The cascade drop-down menu that Bootstrap must learn every day