Home >Web Front-end >JS Tutorial >Bootstarp creates collapsible components_javascript tips

Bootstarp creates collapsible components_javascript tips

WBOYOriginal: 2016-05-16 15:14:061338browse

This article will learn how to create collapsible components through Bootstarp. The specific content is as follows
What is required
You must reference 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.
Example
The first example demonstrates 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>

Explanation
There are three points to note here. First, add data-toggle="collapse" to the link you want to click to expand or collapse the component.
Second, add an href or a data-target attribute to the parent component whose value is the id of the child component.
Third, add a data-parent attribute to create an accordion effect. The value of the data-parent 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 accordion component that doesn't need to be as complex as an accordion, you don't need to add this property.
Example
The second example shows 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>

Call via JavaScript
You can use the code below to trigger collapse via JavaScript.

 $(".collapse").collapse()

Options, methods and events
Here are some options, methods, and events available through the Bootstrap Collapsible JavaScript plugin. The details are as follows:
Options
parent:The value type is Selector. The default value 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 value is true. When called, toggle all collapsible elements.
Method
.collapse(options): Trigger collapsible content. Accepts an optional option object.
.collapse('toggle'): Show or hide a collapsible page element.
.collapse('show'): Displays a collapsible page element.
.collapse(hide): Hide a collapsible page element.
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 completed).

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript waterfall flow image lazy loading example_javascript skillsNext article：JavaScript waterfall flow image lazy loading example_javascript skills

See more

Bootstarp creates collapsible components_javascript tips

Related articles