Change icon open on button bootstrap

Question

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

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#sixts-section-collapse">Prijava <span class="glyphicon glyphicon-menu-down"></span></button>

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

Rino Raj · Accepted Answer · 2016-03-10T06:57:37.587

3

$(document).ready(function(){
    $("button[data-toggle=collapse]").click(function(){
        $(this).find('span:first').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')
    });
});

Working Demo

$(".collapse").collapse()
$("button[data-toggle=collapse]").click(function(){
        $(this).find('span:first').toggleClass('glyphicon-chevron-down glyphicon-chevron-up')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
              <span class="glyphicon glyphicon-chevron-down"></span> Open
            </button>
          </h4>
        </div>
        <div id="demo" class="panel-collapse collapse in">
          <div class="panel-body">
            Contents:Thank you to help me solve the problem, you're a great guy!
          </div>
        </div>
      </div>
    </div>
</div>

edited Mar 10 '16 at 06:57

answered Mar 10 '16 at 06:37

Rino Raj

6,264
2
27
42

The problem is that it change the icon, but when i close it I want to back to original – Miomir Dancevic Mar 10 '16 at 06:41
1

May be [`toggleClass("A B");`](http://stackoverflow.com/questions/7002039/easiest-way-to-toggle-2-classes-in-jquery) =>This will remove class A and add class B – Rayon Mar 10 '16 at 06:42
#Rayon Dabre can you make answer? – Miomir Dancevic Mar 10 '16 at 06:44
@RayonDabre you can use `$(selector).collapse("hide")` for that – Rino Raj Mar 10 '16 at 06:46
This does not work, i dont know how voted for this answer, the problem it just chnage icon, but when you closed it it again stay same icon?? – Miomir Dancevic Mar 10 '16 at 06:48
@MiomirDancevic Can you create a working example of your problem? – Rino Raj Mar 10 '16 at 06:49
@RinoRaj, I guess OP is mixing things up...I guess he is asking for something I suggested.. – Rayon Mar 10 '16 at 06:50
Yes, i need to toggle down when is closed and toggle up when is opened – Miomir Dancevic Mar 10 '16 at 06:51
@MiomirDancevic I have made an upate. Please verify it – Rino Raj Mar 10 '16 at 06:54
@RayonDabre Thanks for helping me understand the problem :) – Rino Raj Mar 10 '16 at 06:56
@RinoRaj, I'm glad it helped! _Happy Coding_ I guess `toggleClass("A B");` would work as well..Not sure.. – Rayon Mar 10 '16 at 06:57

score 1 · Answer 2 · edited Mar 10 '16 at 08:25

1

$(document).on('click', '[data-toggle="collapse"]', function() {    
    $(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
});

edited Mar 10 '16 at 08:25

Ibrahim Khan

20,616
7
42
55

answered Mar 10 '16 at 06:50

no81no

151
4
6

Change icon open on button bootstrap

2 Answers2

Linked