Introduction:
Here I will explain how to create bootstrap accordion with plus minus icons or bootstrap accordion with plus and minus example or how to show / add plus minus icons to bootstrap accordion menu with example.
Description:
In previous articles I explained jQuery vertical accordion menu example, Bootstrap autocomplete textbox example in asp.net, Bootstrap dropdownlist with checkboxes in jQuery, Bootstrap set particular tab opened in jQuery, jQuery autocomplete textbox with multiple words in asp.net, jQuery slideup, slidedown, slidetoggle effects example and many articles relating to autocomplete, bootstrap, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to create bootstrap accordion with plus / minus icons example.
In previous articles I explained jQuery vertical accordion menu example, Bootstrap autocomplete textbox example in asp.net, Bootstrap dropdownlist with checkboxes in jQuery, Bootstrap set particular tab opened in jQuery, jQuery autocomplete textbox with multiple words in asp.net, jQuery slideup, slidedown, slidetoggle effects example and many articles relating to autocomplete, bootstrap, css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to create bootstrap accordion with plus / minus icons example.
To
implement bootstrap accordion menu with plus minus icons, we need to add bootstrap css and script file reference in application. Now open your
aspx page and write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Accordion with Plus Minus Icons Example</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse',
function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
</head>
<body>
<form id="form1">
<div class="container" style="width:50%">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion"
href="#menuOne">
<span class="glyphicon glyphicon-minus"></span>
Sample Menu #1
</a>
</h4>
</div>
<div id="menuOne"
class="panel-collapse
collapse in">
<div class="panel-body">
Welcome to Aspdotnet-Suresh Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to
Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to
Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion"
href="#menuTwo">
<span class="glyphicon glyphicon-plus"></span>
Sample Menu #2
</a>
</h4>
</div>
<div id="menuTwo"
class="panel-collapse
collapse">
<div class="panel-body">
Welcome to Aspdotnet-Suresh Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to
Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to
Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion"
href="#menuThree">
<span class="glyphicon glyphicon-plus"></span>
Sample Menu #3
</a>
</h4>
</div>
<div id="menuThree"
class="panel-collapse
collapse">
<div class="panel-body">
Welcome to Aspdotnet-Suresh Welcome to
Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome
to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to
Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
|
Now we will run and see the output that would be like as
shown below
Demo
Check
following demo for bootstrap accordion with plus minus icons example
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
Hi Suresh,
will u clarify personal asp.net project doubts ?
Note: Only a member of this blog may post a comment.