Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. Next, through this article, I will introduce to you the example of the usage of Bootstrap folding (Collapse) plug-in. Let’s take a look!
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 separately, then you need to reference collapse.js. At the same time, you also need to reference the Transition plugin in your Bootstrap version. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
You can use the Collapse plugin:
Create a foldable grouping or folding panel as follows:
<!DOCTYPE html><html><head><title>Bootstrap instance - Folding panel</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div id="accordion"><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me to expand, click me to collapse again. Part 1</a></h4></div><div id="collapseOne"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Click me to expand, click me to collapse again. Part 2</a></h4></div><div id="collapseTwo"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Click me to expand, click me to collapse again. Part 3</a></h4></div><div id="collapseThree"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div></div></body></html>
The results are as follows:
data-toggle="collapse" is added to the link to the component you want to expand or collapse.
The href or data-target property is added to the parent component, and its value is the id of the child component.
The data-parent property adds the id of the collapsed panel to the link of the component to be expanded or collapsed.
Create a simple collapsible component without the accordion tag, as shown below:
<!DOCTYPE html><html><head><title>Bootstrap instance- Simple foldable component</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><button type="button" data-toggle="collapse" data-target="#demo">Simple foldable component</button><div id="demo">Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></body></html>
The results are as follows:
As you can see in the instance, we created a foldable component, unlike the folded panel, we did not add the property data-parent.
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()Options
There are some options that are passed through data properties or JavaScript. The following table lists these options:
method
Here are some useful methods in Collapse plugins:
Example
The following example demonstrates the usage of the method:
<!DOCTYPE html><html><head><title>Bootstrap instance - Collapse plug-in method</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div id="accordion"><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Click me to expand, click me to collapse again. Part 1--hide method</a></h4></div><div id="collapseOne"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Click me to expand, click me to collapse again. Part 2 --show method</a></h4></div><div id="collapseTwo"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div><div><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Click me to expand, click me to collapse again. Part 3--toggle method</a></h4></div><div id="collapseThree"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Click me to expand, click me to collapse again. Part 4--options method</a></h4></div><div id="collapseFour"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><script type="text/javascript">$(function () { $('#collapseFour').collapse({toggle: false})});$(function () { $('#collapseTwo').collapse('show')});$(function () { $('#collapseThree').collapse('toggle')});$(function () { $('#collapseOne').collapse('hide')});</script> </body></html>The results are as follows:
event
The following table lists the events to be used in the Collapse plug-in. These events can be used as hooks in functions.
Example
The following example demonstrates the usage of events:
<!DOCTYPE html><html><head><title>Bootstrap instance - Collapse plugin event</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script><body><div id="accordion"><div><h4><a data-toggle="collapse" data-parent="#accordion" href="#collapseexample">Click me to expand, click me to collapse again. --shown event</a></h4></div><div id="collapseexample"><div>Nihil anim keffiyeh helvetica, craft beer labor wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.</div></div></div><script type="text/javascript">$(function () { $('#collapseexample').on('show.bs.collapse', function () {alert('Hey, this warning is prompted when you expand');})});</script> </body></html>The results are as follows:
The above is the detailed explanation of the Bootstrap folding (Collapse) plug-in usage example introduced by the editor. I hope it will be helpful to everyone!