Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap HTML Coding Standards Bootstrap Collapse Plugin

Bootstrap Collapse (Collapse) Plugin

The Collapse plugin can easily fold up page areas. Whether you use it to create a collapsible navigation or a content panel, it allows many 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 Transition (Transition) Plugin. Or, as Bootstrap Plugin Overview As mentioned in the chapter, you can refer to bootstrap.js or the compressed version bootstrap.min.js.

You can use the Collapse plugin:

Create collapsible groups or accordion panels, as shown below:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Accordion</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></});
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></});
body>/head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Click me to expand, click me again to collapse. The
				body>/a>
			body>/h4>
		body>/div>
		hide method-<div id="collapseOne" class="panel
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			body>/div>
		body>/div>
	body>/div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Click me to expand, click me again to collapse. The
				body>/a>
			body>/h4>
		body>/div>
		show method-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			body>/div>
		body>/div>
	body>/div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Click me to expand, click me again to collapse. The
				body>/a>
			body>/h4>
		body>/div>
		toggle method-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			body>/div>
		body>/div>
	body>/div>
body>/div>
body>/script>
body>/<

html>/Test to see ‹

›

data-toggle="collapse" Add to the link of the component you want to expand or collapse.
href or data-target Attribute add to the parent component, whose value is the child component's id.
data-parent Attributes add the accordion's id to the link of the component to be expanded or collapsed.

Create a simple collapsible component without accordion tags (collapsible), as shown below:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Simple collapsible component</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></});
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></});
body>/head>
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse"　
		data-target="#demo">
	Simple collapsible component
body>/button>
<div id="demo" class="collapse in">
	Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
	cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
	vice lomo.
body>/div>
body>/script>
body>/<

html>/Test to see ‹

›

As you can see in the example, we created a collapsible component. Unlike the accordion, we did not add any attributes data-parent.

Usage

The following table lists the classes used by the Collapse plugin to handle heavy expansion and contraction:

Class	Description	Example
.collapse	Hide content.	Try it out
.collapse.in	Display content.	Try it out
.collapsing	Added when the transition effect starts and removed when the transition effect is completed.

You can use the Collapse (Collapse) plugin in the following two ways:

Through data attributes：Add data-toggle="collapse" and data-target，automatically assign control of the collapsible element.data-target The attribute accepts a CSS selector and applies the collapse effect to it. Make sure to add the class to the collapsible element .collapse. If you want it to be open by default, add an additional class .in.
To add group management similar to collapse panels to collapsible controls, add the data attribute data-parent="#selector".
Through JavaScript：Can activate the collapse method through JavaScript, as shown below:
```
$('.collapse').collapse()
```

Options

Some options are passed through data attributes or JavaScript. The following table lists these options:

Option name	Type/Default value	Data attribute name	Description
parent	selector Default value: false	data-parent	If a selector is provided, all collapsible elements under the specified parent element will be closed when the collapsible item is displayed. This is similar to the behavior of traditional collapse panels (accordions). - This depends on accordion-group class.
toggle	boolean Default value: true	data-toggle	Toggle call collapsible elements.

Methods

The following are some useful methods in the Collapse (Collapse) plugin:

Methods	Description	Example
Options: .collapse(options)	Activate content as collapsible elements. Accept an optional options object.	$('#identifier').collapse({ 　　　　$$(function () { $('#collapseFour').collapse({ )
Toggle: .collapse('toggle')	Toggle display/Hide collapsible elements.	$('#identifier').collapse('toggle')
Show: .collapse('show')	Show collapsible elements.	$('#identifier').collapse('show')
Hide: .collapse('hide')	Hide collapsible elements.	$('#identifier').collapse('hide')

Online Example

The following examples demonstrate the usage of the method:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Collapse plugin method</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></});
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></});
body>/head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					href="#collapseFour">　1　Click me to expand, click me again to collapse. The--href="#collapseOne">
				body>/a>
			body>/h4>
		body>/div>
		hide method-<div id="collapseOne" class="panel
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			body>/div>
		body>/div>
	body>/div>
	<div class="panel panel-collapse collapse in">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　success">
					href="#collapseFour">　2　Click me to expand, click me again to collapse. The--href="#collapseTwo">
				body>/a>
			body>/h4>
		body>/div>
		show method-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			body>/div>
		body>/div>
	body>/div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　<div id="collapseTwo" class="panel
					href="#collapseFour">　3　Click me to expand, click me again to collapse. The--href="#collapseThree">
				body>/a>
			body>/h4>
		body>/div>
		toggle method-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			body>/div>
		body>/div>
	body>/div>
	<div class="panel panel-<div id="collapseThree" class="panel
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　warning">
					href="#collapseFour">　4　Click me to expand, click me again to collapse. The--Part
				body>/a>
			body>/h4>
		body>/div>
		options method-collapse collapse">
			<div class="panel-body">
				<div id="collapseFour" class="panel　
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
			body>/div>
		body>/div>
	body>/div>
body>/div>
<script type="text/javascript">
	lomo.
		$$(function () { $('#collapseFour').collapse({
	toggle: false
	});
	$$(function () { $('#collapseTwo').collapse('show');});
	$$(function () { $('#collapseThree').collapse('toggle');});
body>/});　　
body>/script>
body>/<

html>/Test to see ‹

›

The following table lists the events used in the Collapse plugin. These events can be used as hooks in functions.

$(function () { $('#collapseOne').collapse('hide');});

The following table lists the events used in the Collapse plugin. These events can be used as hooks in functions.	Description	Example
show.bs.collapse	This event is triggered after the show method is called.	$('#identifier').on('show.bs.collapse', function () { 　　　　//　Execute some actions... )
shown.bs.collapse	This event is triggered when the collapsible element is visible to the user (the CSS transition effect will be waiting to complete).	$('#identifier').on('shown.bs.collapse', function () { 　　　　//　Execute some actions... )
hide.bs.collapse	This event is triggered immediately when the hide example method is called.	$('#identifier').on('hide.bs.collapse', function () { 　　　　//　Execute some actions... )
hidden.bs.collapse	This event is triggered when the collapsible element is hidden to the user (the CSS transition effect will be completed).	$('#identifier').on('hidden.bs.collapse', function () { 　　　　//　Execute some actions... )

Online Example

The following example demonstrates the usage of events:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Collapse plugin event</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></});
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></});
body>/head>
<body>
<div class="panel-group" id="accordion">
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4　class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseexample">
					Click me to expand, click me again to collapse.--show event
				body>/a>
			body>/h4>
		body>/div>
		<div id="collapseexample" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson　
				cred nesciunt sapiente ea proident.　
				Ad vegan excepteur butcher vice lomo.
			body>/div>
		body>/div>
	body>/div>
body>/div>
<script type="text/javascript">
	javascript">　
		$('function () {
			$('#collapseexample').on('show.bs.collapse', function () {
	alert('Hey, this alert will be prompted when you expand');}
body>/});　
body>/script>
body>/<

html>/Test to see ‹

›

Bootstrap HTML Coding Standards Bootstrap Collapse Plugin