Toggle the glyphicon with bootstrap collapse

Question

I have glyphicon-chevron-down when div is in collapsed state,i want to replace it with glyphicon-chevron-up when the div is in collapse in state.I have many of these collapsible divs in my project.So i need to toggle the glyphicon on press of particular collapsibe content(or div).

HTML

<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

JavaScript

$(document).ready(function () {
    $('.glyphicon-chevron-down').click(function () {
        $(this).parent("div").find(".glyphicon-chevron-down")
            .toggleClass("glyphicon-chevron-up");
    });
});

Fiddle here

Solution 1

Your JS is putting an emphasis on the wrong thing. Find is very slow and best avoided if possible -- and it's very possible here. Just change it to this:

$(document).ready(function () {
    $('.glyphicon').click(function () {
        $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
    });
});

JS Fiddle: http://jsfiddle.net/ft4mnynh/

Solution 2

Try the FIDDLE,

I have changed the selectors and events like below

$(document).ready(function () {
    $('.divcontainer').click(function () {
        $(this).find("span:eq(1)")
            .toggleClass('glyphicon-chevron-down')
            .toggleClass("glyphicon-chevron-up");
    });
});

Hope this helps

Solution 3

Use this below jquery code and just change glyphicon name as you wish

<script>
	$('.collapse').on('shown.bs.collapse', function(){
		$(this).parent().find(".glyphicon-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");
			}).on('hidden.bs.collapse', function(){
			$(this).parent().find(".glyphicon-menu-down").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-right");
	});
</script>

Solution 4

The following code worked for me. As far as I can tell the bootstrap js events only fire on the "div.collapse" element, i.e., the hidden and shown block(s). Even the jquery "click" event on "div.panel-heading" or any child was unresponsive.

<div class="panel-heading" role="tab" id="headingOne">
   <h4 class="panel-title">
   <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
     Getting Started
   <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
    <a id="choosing">Choosing a topic</a>
    <a id="exploring">Exploring a topic</a>
</div></div>

JQuery

$(document).ready(function () {
    $('div.collapse').on("show.bs.collapse || hide.bs.collapse", function () {
      let glyph = $(this).siblings("div.panel-heading").find('span.glyphicon');
      glyph.hasClass("glyphicon-menu-right") ?   glyph.toggleClass("glyphicon-menu-down") :   glyph.toggleClass("glyphicon-menu-right");
    });
});

Solution 5

You need to toggle both classes chevron-up and chevron-down. You can find the correct div using the more general glyphicon class.

I also added id to the div, so you don't need to find it by the down class

See: http://jsfiddle.net/amwLaojj/1/

$(document).ready(function () {
    $('#myglyph').click(function () {
        $(this).parent("div").find(".glyphicon")
            .toggleClass("glyphicon-chevron-up")
            .toggleClass("glyphicon-chevron-down");
   });
});

Update:

Instead of ID, you can use:

$('.glyphicon[data-toggle=collapse]').click(function () {

Updated in: http://jsfiddle.net/amwLaojj/3/

View more solutions

Comments

[Raviteja]

this is changing other glyphicons when it is in collapse in state

[Raviteja]

but using this overrides the other glyphicons which i have in my page

[Chuck Le Butt]

@IamRaviteja Then simply add a unique class for use on dropdowns, like so: jsfiddle.net/gt1uwu79