Quick Reach
Bootstrap collapse
By using Twitter Bootstrap collapse plugin with transition plugin, you can create accordion or other collapsible navigation. This chapter is focused at the Bootstrap accordion by using the collapse plugin. Below are a few examples of creating accordion.
The accordion is a cool way of presenting information into your website if you have larger content. As you click on one ‘menu item’ or link the content inside the accordion expands that hides other content.
Bootstrap accordion example
The following example creates an accordion with three panels. By default first one is shown. You can change the expanded panel by adding “in” to the panel-collapse collapse class. Click on the following link to see it online:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<!DOCTYPE html>
<html>
<head>
<title>accordion example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<!–Main container div starts here –>
<div>
<h1>An accordion example</h1>
<div id=“accordion”>
<div class=“panel panel-default”>
<div class=“panel-heading”>
<h4 class=“panel-title”>
<a data-toggle=“collapse” data-parent=“#accordion” href=“#collapseOne”>
What is accordion?
</a>
</h4>
</div>
<div id=“collapseOne”>
<div class=“panel-body”>
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.
</div>
</div>
</div>
<div class=“panel panel-default”>
<div class=“panel-heading”>
<h4 class=“panel-title”>
<a data-toggle=“collapse” data-parent=“#accordion” href=“#collapseTwo”>
How to create Bootstrap accordion?
</a>
</h4>
</div>
<div id=“collapseTwo”>
<div class=“panel-body”>
You can create accordion using Bootstrap framework. The plug-in used to create accordion is collapse.js!
</div>
</div>
</div>
<div class=“panel panel-default”>
<div class=“panel-heading”>
<h4 class=“panel-title”>
<a data-toggle=“collapse” data-parent=“#accordion” href=“#collapseThree”>
What is Bootstrap?
</a>
</h4>
</div>
<div id=“collapseThree”>
<div class=“panel-body”>
Bootstrap is web framework used to create web sites provided by Twitter.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Creating button accordion example with data attribute
The above example creates accordion with href or hyperlinks. This example shows how to create bootstrap accordion with the buttons. You simply need to use data-toggle=”collapse” data attribute to the button and data-target to the element which is the collapsible element. In that case, the element is collapsible div which is referred by id in data-target. See example below:
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<title>accordion example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<!–Main container div starts here –>
<div>
<h1>An accordion example</h1>
<div>
<button type=“button” data-toggle=“collapse” data-target=“#accordion1”>What is accordion?</button>
<!– Collapsible Content –>
<div id=“accordion1”><p>The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.</p></div>
</div>
<div>
<button type=“button” data-toggle=“collapse” data-target=“#accordion2”>How to create Bootstrap accordion?</button>
<!– Collapsible Content –>
<div id=“accordion2”><p>You can create accordion using Bootstrap framework. The plug-in used to create accordion is collapse.js!</p></div>
</div>
<div>
<button type=“button” data-toggle=“collapse” data-target=“#accordion3”>What is Bootstrap?</button>
<!– Collapsible Content –>
<div id=“accordion3”><p>Bootstrap is web framework used to create web sites provided by Twitter.</p></div>
</div>
</div>
</body>
</html>
|
jQuery accordion example with bootstrap
You can also create accordion by using JavaScript. If you know a little about jQuery then it is quite easy to do in Javascript. Simply, use the .collapse method of the accordion in the click event of the button in jQuery section to show / hide the collapsible element. The example uses the same content as in the above example and the output is also the same, however, accordion is created by using the Javascript rather data attribute.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html>
<html>
<head>
<title>accordion example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(“#acc1”).click(function(){
$(“#accordion1”).collapse(‘toggle’);
});
$(“#acc2”).click(function(){
$(“#accordion2”).collapse(‘toggle’);
});
$(“#acc3”).click(function(){
$(“#accordion3”).collapse(‘toggle’);
});
});
</script>
</head>
<body>
<!–Main container div starts here –>
<div>
<h1>An accordion example</h1>
<div>
<button type=“button” id=“acc1” >What is accordion?</button>
<!– Collapsible Content –>
<div id=“accordion1”><p>The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.</p></div>
</div>
<div>
<button type=“button” id=“acc2”>How to create accordion?</button>
<!– Collapsible Content –>
<div id=“accordion2”><p>You can create accordion using Bootstrap framework. The plug-in used to create accordion is collapse.js!</p></div>
</div>
<div>
<button type=“button” id=“acc3”>What is Bootstrap?</button>
<!– Collapsible Content –>
<div id=“accordion3”><p>Bootstrap is web framework used to create web sites provided by Twitter.</p></div>
</div>
</div>
</body>
</html>
|
Also see The Bootstrap Tables | How to create Bootstrap Forms
Leave A Comment?