In this video we will discuss creating an accordion with arrows using bootstrap.
Bootstrap tutorial for beginners
When an accordion panel is expanded, an arrow pointing upwards should be displayed indicating that if we click again the panel will collapse. Along the same lines, a downward pointing arrow should be displayed when the panel is collapsed, indicating that panel will be expanded if we click on it again. We will be using the Bootstrap Glyphicons to achieve this.
If you want plus and minus icons instead of UP and DOWN arrows, replace the <span> elements with glyphicon-minus-sign and glyphicon-plus-sign
We also need to change the jQuery code as shown below
With the above 2 simple changes, the accordion looks as shown below.
Expanding and collapsing all the panels on click of a button
Bootstrap tutorial for beginners
When an accordion panel is expanded, an arrow pointing upwards should be displayed indicating that if we click again the panel will collapse. Along the same lines, a downward pointing arrow should be displayed when the panel is collapsed, indicating that panel will be expanded if we click on it again. We will be using the Bootstrap Glyphicons to achieve this.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap tutorial for begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br />
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyOne" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-menu-up"></span>
Desert
</a>
</h4>
</div>
<div id="panelBodyOne" class="panel-collapse collapse in">
<div class="panel-body">
<img class="img-responsive" src="Images/Desert.jpg"
alt="desert" />
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyTwo" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-menu-down"></span>
Penguins
</a>
</h4>
</div>
<div id="panelBodyTwo" class="panel-collapse collapse">
<div class="panel-body">
<img class="img-responsive" src="Images/Penguins.jpg"
alt="penguins" />
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyThree" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-menu-down"></span>
Jellyfish
</a>
</h4>
</div>
<div id="panelBodyThree" class="panel-collapse collapse">
<div class="panel-body">
<img class="img-responsive" src="Images/Jellyfish.jpg"
alt="jellyfish" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-menu-down')
.removeClass('glyphicon-menu-down')
.addClass('glyphicon-menu-up');
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-menu-up")
.removeClass("glyphicon-menu-up")
.addClass("glyphicon-menu-down");
});
});
</script>
</body>
</html>
If you want plus and minus icons instead of UP and DOWN arrows, replace the <span> elements with glyphicon-minus-sign and glyphicon-plus-sign
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon glyphicon-plus-sign"></span>
We also need to change the jQuery code as shown below
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-plus-sign')
.removeClass('glyphicon-plus-sign')
.addClass('glyphicon-minus-sign');
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus-sign")
.removeClass("glyphicon-minus-sign")
.addClass("glyphicon-plus-sign");
});
});
</script>
With the above 2 simple changes, the accordion looks as shown below.
Expanding and collapsing all the panels on click of a button
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap tutorial for begineers</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br />
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="well">
<button class="btn btn-primary" id="btnExpandAll">
Expand All
</button>
<button class="btn btn-primary" id="btnCollapseAll">
Collapse All
</button>
</div>
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyOne" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-minus-sign"></span>
Desert
</a>
</h4>
</div>
<div id="panelBodyOne" class="panel-collapse collapse in">
<div class="panel-body">
<img class="img-responsive" src="Images/Desert.jpg"
alt="desert" />
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyTwo" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-plus-sign"></span>
Penguins
</a>
</h4>
</div>
<div id="panelBodyTwo" class="panel-collapse collapse">
<div class="panel-body">
<img class="img-responsive" src="Images/Penguins.jpg"
alt="penguins" />
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyThree" data-toggle="collapse"
data-parent="#accordion">
<span class="glyphicon glyphicon-plus-sign"></span>
Jellyfish
</a>
</h4>
</div>
<div id="panelBodyThree" class="panel-collapse collapse">
<div class="panel-body">
<img class="img-responsive" src="Images/Jellyfish.jpg"
alt="jellyfish" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-plus-sign')
.removeClass('glyphicon-plus-sign')
.addClass('glyphicon-minus-sign');
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus-sign")
.removeClass("glyphicon-minus-sign")
.addClass("glyphicon-plus-sign");
});
$('#btnExpandAll').click(function () {
$('.panel-collapse.collapse').collapse('show');
});
$('#btnCollapseAll').click(function () {
$('.panel-collapse.collapse.in').collapse('hide');
});
</script>
</body>
</html>
