Bootstrap fold
description
In this tutorial, you will learn how to create a collapsible components through Bootstarp.
What is required
You must reference jquery.js and bootstrap-collapse.js - two JavaScript files are located in the docs / assets / js folder.
You can create a collapsible components without writing a lot of JavaScript or JavaScript is not called for.
Examples
The first example demonstrates how to call JavaScript does not create collapsible components.
Examples
<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 on My extended. Click I folded again. 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 on My extended. Click I folded again. 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 on My extended. Click I folded again. 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>
View online examples
Explanation
Here are three things to note. First, add data-toggle="collapse" to which you will click on the link, to expand or collapse the assembly.
Second, add a href or a data-target attribute to the parent component, id value its subcomponents.
Third, add a data-parent property is used to create an accordion effect. The same value as data-parent property and the main container div (saving the entire accordion component) of the id attribute. If you want to create a simple folding assembly, do not like the accordion so complicated, you do not need to add this attribute.
Examples
The second example demonstrates how to create a simple folding components.
Examples
<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>
View online examples
Through JavaScript calling
You can use the following JavaScript code to trigger by folding.
$ ( ". Collapse"). Collapse ()
Options, methods and events
Here are some options for use by Bootstrap Collapsible JavaScript widget, methods, events. As shown below:
Options
parent: type value is Selector. The default value is false. When parent element is displayed, all folding elements under the parent element is closed.
toggle: type value is Boolean. The default value is true. When invoked, switch all collapsible elements.
toggle: type value is Boolean. The default value is true. When invoked, switch all collapsible elements.
method
.collapse (options): trigger collapsible content. Accept an optional option object.
.collapse ( 'toggle'): a collapsible display or hide elements on the page.
.collapse ( 'show'): a collapsible display page elements.
.collapse (hide): a collapsible hidden page elements.
event
show: When the show after an instance method is called, this event is triggered immediately.
shown: When folding the page element is displayed (while CSS transitions have been completed), this event is triggered.
hide: When hide after an instance method is called, this event is triggered immediately.
hidden: When folding the page elements to be hidden from users (and CSS transitions have been completed), this event is triggered.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.