Bootstrap folding _javascript Skills every day

This article is mainly to learn about JavaScript Plug-ins--folding.
1. Transition effect
about transition effects
for a simple transition effect, just transition.js and other JS files can be introduced together. If you're using a compiled (or compressed) good Bootstrap.js file, you don't have to introduce it separately.
What ' s inside
Transition.js is a basic helper tool for the are a basic helper for Transitionend event and a simulation of the CSS transition effect. It is used by other plug-ins to detect whether the current browser supports CSS transition effects.
2. Folding
Provides basic styling and flexible support for components that support folding functions, such as accordions and navigation.

Plug-in dependencies

The collapse plug-in relies on a transition effect plug-in.

Case
using the folding plug-in, a simple accordion component is built by extending the Panel component.
Look at the effect first.

Next 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-headi ng "> 
 

First step: first outermost that layer panel-group, below this layer consists of several groups.
Step two: Take a look at a few simple groups

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

It is also clear from the code that the structure of a panel can be seen.
Panel-header and Pandl-body, and then panel-header inside can contain headings, links. Connected through links and Panel-body.
Step three: You can see that there is a id= "accordion" in the Panel-group, and then there is a data-parent= "#accordion" in the link below each heading.
If removed, then the effect is to click on the other links, the original panel does not shrink again.
You can use another way to show the effect of folding.

 <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 Eiusmod High Life Accusamus Terry Richardson ad squid. 3 Wolf Moon Officia Aute, non cupidatat skateboard and dolor. Food Truck Quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor sunt aliqua put a bird on it squid single-origin coffee nulla assumenda et. Nihil anim keffiyeh Helvetica, craft beer, Wes Anderson labore cred nesciunt ea sapiente. 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 Accusamu S Labore sustainable vhs.</div>

The

usage
folding plug-ins control styles by using a few simple classes
. Collapse hidden content
.collapse  in  display content
. Collapsing. it  is added then the transition starts, and removed when it finishes the meaning probably is that the fold is added and the transition effect is there, and then it ends if it is removed.
through the Data property
can give it the ability to control collapsible page elements by simply adding data-toggle= "collapse" and data-target to the page element. The Data-target property accepts a CSS selector as its control object. Make sure to add collapse class for the collapsible page element. If you want the default state of the collapsible page element to be expanded, add in class.
to add a controller to a set of collapsible page elements, add the data-parent= "#selector". Please refer to the example above.
through JavaScript

 <button type= "button" class= "btn Btn-danger" onclick= "open ()" > Open </button > <button type= "button" class= "btn Btn-danger" onclick= "Hide ()" > Folding </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 and dolor. Food Truck Quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor sunt aliqua put a bird on it squid single-origin coffee nulla assumenda et. Nihil anim keffiyeh Helvetica, craft beer, Wes Anderson labore cred nesciunt ea sapiente. 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 Accusamu S 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>

Look at the effect above.

Method
Gives page elements the ability to collapse. Accepts an optional object as an argument.
$ ("#demo"). Collapse ({toggle:false})
This allows the element to be expanded when initialized.
1.collapse (' toggle ') shows or hides a collapsible page element.
2.collapse (' show ') displays a collapsible page element.
3.collapse (' hide ') hides a collapsible page element.
Events
the folding plug-in in the bootstrap exposes a set of events that can be monitored.

This binds the event for the element when it is hidden.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn.