Of Stack

Bootstrap creates collapsible components

  • 2021-01-03 20:49:14
  • OfStack

In this article, you will learn how to create collapsible components from Bootstrap, as follows
What is necessary
You must refer to jquery. js and bootstrap-collapse. js - both JavaScript files are located in the docs/assets/js folder.
You can create collapsible components without writing a lot of JavaScript or calling JavaScript.
The instance
The first example shows how to create a collapsible component without calling JavaScript. 


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible example</title>
 <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
 <div class="container-fluid">
 <div class="accordion" id="accordion2">
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
   Click me to exapand. Click me again to collapse. Part I.
  </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
   Click me to exapand. Click me again to collapse. Part II.
  </a>
  </div>
  <div id="collapseTwo" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  <div class="accordion-group">
  <div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
   Click me to exapand. Click me again to collapse. Part III.
  </a>
  </div>
  <div id="collapseThree" class="accordion-body collapse">
  <div class="accordion-inner">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  </div>
  </div>
  </div>
 </div>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

explain
There are three things to note here. First, add ES24en-ES25en ="collapse" to the link you want to click on to expand or collapse the component.
Second, add 1 href or 1 ES29en-ES30en attribute to the parent component, whose value is id for the child component.
Third, add an ES33en-ES34en attribute to create an accordion effect. The value of the ES35en-ES36en attribute is the same as the value of the id attribute of the main container div (which holds the entire accordion component). If you want to create a simple folding component that doesn't need to be as complex as an accordion, you don't need to add this property.
The instance
The second example demonstrates how to create a simple collapsible component. 


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>collapsible via JavaScript example</title>
 <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

Via JavaScript
You can use the following code to trigger the folds via JavaScript. 


 $(".collapse").collapse()

Options, methods, and events
Here are 1 options, methods, and events to use with the Bootstrap Collapsible JavaScript plug-in. The details are as follows:
options
parent: The value is of type Selector. The default is false. When the parent element is displayed, all collapsible elements under the parent element are closed.
toggle: The value is of type Boolean. The default value is true. When called, toggle all collapsible elements.
toggle: The value is of type Boolean. The default is true. When called, toggle all collapsible elements.
methods
.ES71en (options): Triggers collapsible content. Accept 1 optional option object.
.collapse ('toggle'): Show or hide 1 collapsible page element.
.collapse ('show'): Displays 1 collapsible page element.
.collapse (hide): Hides 1 collapsible page element.
The event
show: This event is triggered immediately after the show instance method is called.
shown: This event is triggered when the collapsible page element is displayed (and the CSS transition effect has been executed).
hide: This event is triggered immediately after the hide instance method is called.
hidden: This event is triggered when the collapsible page element is hidden from the user (and the CSS transition effect has been executed).

If you still want to learn more, you can click here to learn more, and there are two wonderful projects for you: Bootstrap Learning Tutorial Bootstrap Practical Tutorial

Above is the entire content of this article, I hope to help you with your study.

Related articles: