0

I am trying to replace a class with another class when a panel heading is clicked like so:

This currently isn't working (toggling the class) - any ideas?

jQuery:

   $('.panel-heading').click(function () {
            if ($(this).closest('span.fa').hasClass('fa-caret-down')) {
                $(this).closest('span.fa').removeClass('fa-caret-down').addClass('fa-caret-right');
            }
            else {
                $(this).closest('span.fa').removeClass('fa-caret-right').addClass('fa-caret-down');
            }

        });

HTML:

  <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
     <h4 class="panel-title">
         Main <span class="fa fa-caret-down fa-lg pull-right"></span>
     </h4>
  </div>
Kara
  • 6,115
  • 16
  • 50
  • 57
raklos
  • 28,027
  • 60
  • 183
  • 301

1 Answers1

5

According to jQuery docs, we use closest to find element which is outer/upper to the element.

http://api.jquery.com/closest/

"For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree."

So in your case the span is inside the clicked element so you need to use find instead of closest.

Try this. http://jsfiddle.net/aamir/4RCMc/1/

 $('.panel-heading').click(function () {
     var $span = $(this).find('span.fa');
     if ($span.hasClass('fa-caret-down')) {
         $span.removeClass('fa-caret-down').addClass('fa-caret-right');
     } else {
         $span.removeClass('fa-caret-right').addClass('fa-caret-down');
     }
 });

Or try http://jsfiddle.net/aamir/4RCMc/3/

 $('.panel-heading').click(function () {
     $(this).find('span.fa').toggleClass( 'fa-caret-down', 'fa-caret-right' );
 });

Read more here: https://coderwall.com/p/wxjljq

Aamir Afridi
  • 6,364
  • 3
  • 42
  • 42