I was trying to add plus and minus to bootstrap accordion, which shows plus when the div that shows content is open and minus when closed and also when I open second tab it should close contents of the other tabs which is open(this currently happening) and also it should change the minus icon to plus icon of the tabs other than active tab.
Anyone who can e with the solution or approach is greatly appreciated :).
enter code here
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
jquery code
<script>
$(document).ready(function() {
$('.panel-title-custom').addClass('glyphicon glyphicon-plus');
$('.panel-title-custom').click(function(){
$(this).toggleClass('glyphicon-plus glyphicon-minus');
});
});
</script>
I was trying to add plus and minus to bootstrap accordion, which shows plus when the div that shows content is open and minus when closed and also when I open second tab it should close contents of the other tabs which is open(this currently happening) and also it should change the minus icon to plus icon of the tabs other than active tab.
Anyone who can e with the solution or approach is greatly appreciated :).
enter code here
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-heading-custom">
<h4 class="panel-title panel-title-custom">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.</div>
</div>
</div>
jquery code
<script>
$(document).ready(function() {
$('.panel-title-custom').addClass('glyphicon glyphicon-plus');
$('.panel-title-custom').click(function(){
$(this).toggleClass('glyphicon-plus glyphicon-minus');
});
});
</script>
Share
Improve this question
asked Aug 29, 2016 at 7:08
DeepakDeepak
3151 gold badge6 silver badges18 bronze badges
2
- Show what you have already tried and give some better examples. – Black Commented Aug 29, 2016 at 7:10
- Please check this link: stackoverflow./questions/16773724/… – Novice Commented Aug 29, 2016 at 7:20
3 Answers
Reset to default 4There is no need to use jQuery or javascript for this. simple 5 lines of css can do this for you. For bootstrap accordion one attribute called aria-expanded="true"/aria-expanded="false" will be getting added to the accordion heading. you add can css according to that. see this codepen example
.accordion-btn {
position: relative;
}
.accordion-btn:before {
position: absolute;
content: "+";
right: 10px;
top: 5px;
}
.accordion-btn[aria-expanded="true"]:before {
content: "-"; }
Here you go working code.
$('#accordion')
.on('show.bs.collapse', function(e) {
$(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-plus');
$(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-minus');
})
.on('hide.bs.collapse', function(e) {
$(e.target).prev('.panel-heading-custom').find('div').removeClass('glyphicon glyphicon-minus');
$(e.target).prev('.panel-heading-custom').find('div').addClass('glyphicon glyphicon-plus');
});
Check the below JSFiddle
JSFIDDLE
$('.panel-title > a').click(function() {
$(this).parents('.panel-default').find('i').toggleClass('fa-plus fa-minus');
$(this).parents('.panel-default').siblings('.panel-default').find('i').removeClass('fa-minus').addClass('fa-plus')
});
<link href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="accordion_icon fa fa-minus"></i> Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="accordion_icon fa fa-plus"></i> Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="accordion_icon fa fa-plus"></i>Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>