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

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.