Javascript - Super simple - How to code for action of second click

Question

Probably a simple question for most of you, but I am just learning so you will have to forgive me...

I am writing code to have several different elements appear on screen in a daisy-chained order of events. Essentially I am laying one element over the next one. On initial page load the user will see only element_0_5. Clicking this element will display the next, and so on.

Where I am stuck is I cant figure out how to make the code go back to displaying only element_0_5 and re-hide everything else. Basically making it so when I click element_0_0 a second time, all elements reverse any previous actions and return back to initial state of displaying element_0_5

Please help thanks!!

 $('#element_0_3').on('click', function(event) { $('#element_0_4').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_4').addClass('animated fadeInDown'); }, 10); }); $('#element_0_3').on('click', function(event) { $('#element_0_6').removeClass('animated rotateIn infinite'); setTimeout(function() { $('#element_0_6').addClass('animated rotateIn'); }, 10); }); $('#element_0_3').on('click', function(event) { $('#element_0_7').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_7').addClass('animated fadeInDown'); }, 10); }); $('#element_0_5').on('click', function(event) { $('#element_0_0').removeClass('animated slideInUp infinite'); setTimeout(function() { $('#element_0_0').addClass('animated slideInUp'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_1').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_1').addClass('animated fadeInDown'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_2').removeClass('animated rotateIn infinite'); setTimeout(function() { $('#element_0_2').addClass('animated rotateIn'); }, 10); }); $('#element_0_0').on('click', function(event) { $('#element_0_3').removeClass('animated fadeInDown infinite'); setTimeout(function() { $('#element_0_3').addClass('animated fadeInDown'); }, 10); }); $('#element_0_5').on('click', function(event) { $('#element_0_0').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_1').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_2').toggle(); }); $('#element_0_0').on('click', function(event) { $('#element_0_3').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_4').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_6').toggle(); }); $('#element_0_3').on('click', function(event) { $('#element_0_7').toggle(); }); 

Answer 1

You could add a control variable, something like this

var click = 0;
$('#element_0_0').on('click', function(event) {
  if(click == 0){
    $('#element_0_1').removeClass('animated fadeInDown infinite');
    setTimeout(function() {
      $('#element_0_1').addClass('animated fadeInDown');
    }, 10);
     click = 1;
  }else{
    $('#element_0_1').addClass('animated fadeInDown');
    setTimeout(function() {
      $('#element_0_1').removeClass('animated fadeInDown infinite')
    }, 10);
     click = 0;
  }

});