I am using button with Bootstrap Glyphicon Components and have a lots of buttons on one page, it is using collapse to show hidden section.Here is example codes i have
JavaScript
x
6
1
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>
2
3
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>
4
5
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>
6
What i need is when user click on that button and collapse is shown just to change that icon from down to up, i know i can make it globally for all, but i need to check only for that button and on that button to show another icon. It means when is closed icon down, and when is opened icon up
Advertisement
Answer
JavaScript
1
6
1
$(document).ready(function(){
2
$("button[data-toggle=collapse]").click(function(){
3
$(this).find('span:first').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')
4
});
5
});
6
Working Demo
JavaScript
1
4
1
$(".collapse").collapse()
2
$("button[data-toggle=collapse]").click(function(){
3
$(this).find('span:first').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')
4
});
JavaScript
1
21
21
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
3
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
4
<div class="container">
5
<div class="panel-group" id="accordion">
6
<div class="panel panel-default">
7
<div class="panel-heading">
8
<h4 class="panel-title">
9
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
10
<span class="glyphicon glyphicon-chevron-down"></span> Open
11
</button>
12
</h4>
13
</div>
14
<div id="demo" class="panel-collapse collapse in">
15
<div class="panel-body">
16
Contents:Thank you to help me solve the problem, you're a great guy!
17
</div>
18
</div>
19
</div>
20
</div>
21
</div>