Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Bootstrap Accordion with Plus Minus Icons Example

May 27, 2016
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.


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 RSS subscribe by email Subscribe by Email

1 comments :

harika aakutota said...

Hi Suresh,
will u clarify personal asp.net project doubts ?

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.