Show hide bootstrap glyphicon when show hide content from the panel

Question

I am new to JS and jQuery. I am trying to achieve the following: when I hide the content of the panel I want to use the glyphicon-folder-close icon, and when I show the content of the panel I want to use the glyphicon-folder-open icon.

This is part of my view (I'm using Rails):

<div class="panel panel-warning">
  <div class=panel-heading style="font-weight: bold;">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#panel" href="#saleitem" class="panel-toggle">
        <span class="glyphicon glyphicon-folder-close"  id="icontoggle"></span>
        Sale Items
      </a>
    </h4>
  </div>

  <div id="saleitem" class="panel-collapse collapse">
     <div class="panel-body">
       <div class="table-responsive">
         <table class="table table-hover table-condensed">
           <thead>

And this is my jQuery:

$(document).ready(function(){
  $('#saleitem').on('show', function () {
    $(".glyphicon-folder-close").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
  });

  $('#saleitem').on('hide', function () {
      $(".glyphicon-folder-open").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
  });
});

Thanks in advance!

I don't think jQuery triggers an event called 'show' and 'hide' when it shows/hide an element... try using the click event — MrYoshiji, Apr 09 '14 at 16:53
@railsr True, the code i posted has nothing from my rails code. Sorry for the tag. — chch, Apr 09 '14 at 17:03

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I used the toggleClass as MrYoshiji suggested, I am not using a button though so I added the shown.bs.collapse event from http://getbootstrap.com/javascript/#collapse-usage. I had also to add a class in my span because otherwise all my glyphicon glyphicon-folder-close or glyphicon glyphicon-folder-open they were opening and closing simultaneously. Also these posts helped me: Binding to Collapse event in Twitter Bootstrap 3 bootstrap-collapse.js hide and show events

and here is my jQuery:

jQuery(function(){
    $('#saleitem').on('shown.bs.collapse', function (){
        $(".glyphiconsales").toggleClass("glyphicon-folder-open")
    })

    $('#saleitem').on('hidden.bs.collapse', function(){
        $(".glyphiconsales").toggleClass("glyphicon-folder-open")
    })
});

score 0 · Answer 2 · answered Apr 09 '14 at 17:21

Try following code, or click here for my demo.

$('.glyphicon').parent().click(function(){
    if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-close')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open');
    }else if(jQuery(this).children('.glyphicon').hasClass('glyphicon-folder-open')){
        jQuery(this).children('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
    }
});

Show hide bootstrap glyphicon when show hide content from the panel

2 Answers2