Every day, Bootstrap must learn the folding _ javascript skills

Every day, Bootstrap is required to fold. This article explains the Bootstrap fold operation. If you are interested, you can refer to this article to learn about 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.

  
  
  
       Collapsible Group Item      
  
   
 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. 
  
  
  
  
       Collapsible Group Item #2      
  
   
 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. 
  
  
  
  
       Collapsible Group Item #3      
  
   
 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. 
  
  
 
 

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

 
     Collapsible Group Item #1    
 
  
  
 

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.

 
  simple collapsible 
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.

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

OpenFold
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.