Suggested Video Tutorials
Part 36 - Bootstrap media object
Part 37 - Bootstrap collapse plugin
Part 38 - Bootstrap accordion
In this video we will discuss creating an accordion with arrows using bootstrap. This is continuation to Part 38. Please watch Part 38 from Bootstrap tutorial before proceeding.
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
Part 36 - Bootstrap media object
Part 37 - Bootstrap collapse plugin
Part 38 - Bootstrap accordion
In this video we will discuss creating an accordion with arrows using bootstrap. This is continuation to Part 38. Please watch Part 38 from Bootstrap tutorial before proceeding.
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>
No comments:
Post a Comment
It would be great if you can help share these free resources