JavaScript (jQuery?): Toggle multiple classes with one click

Question

When the user clicks div.togglethis, I need two things to happen:

1. Add an "active" class to div.togglethis

2. Add a "show" class to an outside element div.showthis

When the user clicks on div.togglethis a second time, it removes those two classes from both elements.

I am somewhat new to javascript, so any assistance is welcome.

HTML:

<div class="togglethis">Click me to add "active"</div>
<div class="showthis">When togglethis is "active", I am "showthis"</div>

Answer 1

You cannot remove togglethis entirely otherwise the click won't work next time. Also, I'm not removing the class on second div for the same reason, rather I'm calling show/hide as I think that is what you intend to do.

<div class="toggle togglethis">Click me to add "active"</div>

$('div.toggle').click(function(){
  if($(this).hasClass('togglethis')) {
      $(this).removeClass('togglethis').addClass('active');
      $('div.showthis').hide();
  }
  else {
      $(this).removeClass(active).addClass('togglethis');
      $('div.showthis').show();

  }
});

Answer 2

You should look at jQuery's addClass, removeClass, toggleClass, and hasClass methods (API references here, here, here, and here).

You would call these methods in the click handler for div.togglethis. Give this a try and post another question if you get stuck.