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();

  }
});