Question

If have a set of collapsible elements, in which I need to replace classes left and right depending on event isCollapse:

<div class="collapsible-set">
  <div class="collapsible">
      <h3>
        <a class="left">
           <span class="left"></span>
        </a>
      </h3>
  </div>
  <div class="collapsible">
      <h3>
        <a class="right">
           <span class="right"></span>
        </a>
      </h3>
  </div>
</div>

I need to toggle the classes. Is there an eaiser way to do this than what I came up with?

if (collapse) {
  $('.left').addClass('topLeft').removeClass('left');
  $('.right').addClass('topRight').removeClass('right');
  } else if (!collapse) {
    $('.topLeft').addClass('left').removeClass('topLeft');
    $('.topRight').addClass('right').removeClass('topRight');
    }

There must be an eaiser way to do this without writing so much code…

Answer 1

look at toogleClass http://api.jquery.com/toggleClass/

$('.collapsible:eq(0)').find('a').toggleClass('topLeft').toggleClass('left');
$('.collapsible:eq(1)').find('a').toggleClass('topRight').toggleClass('right');