title: Multiple if's in JavaScript to do multiple things
body: <p>I have a div, containing 3 different divs.</p>
  
  <p>I need help to make an intelligent toggle function.</p>
  
  <p>So, when the parent div is clicked, it will check which div is visible, and have a specific action for each div.</p>
  
  <p>So if Div1 is visible, do X
  if Div2 is visible, do Y
  if div3 is visible, do Z</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".button").click(function() {
    if ($('.div1', this).is(':visible')) {
      $(".div1", this).hide();
      $(".div2", this).show();
    }
    if ($('.div2', this).is(':visible')) {
      $(".div2", this).hide();
      $(".div3", this).show();
      $(".divtemp", this).show();
    }
    if ($('.div3', this).is(':visible')) {
      $(".div3", this).hide();
      $(".div1", this).show();
      $(".divtemp", this).hide();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="button"&gt;
    &lt;div class="div1"&gt;&lt;/div&gt;
    &lt;div class="div2"&gt;&lt;/div&gt;
    &lt;div class="div3"&gt;&lt;/div&gt;
    &lt;div class="divtemp"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problem is, when this code is run, it correctly runs through the whole code because each "if" is fulfilling the next "if".</p>
  
  <p>This is probably basic programming, but if anyone could help it would be highly appreciated!</p>
  
  <ul>
  <li>S</li>
  </ul>