title: How to show divs progressively with one function?
body: <p>I have an html page with three div and one button. div2 and div3 are hidden, and div1 is shown from the beginning. What I want to do is that, when you press the button, div 2 appears below div 1, and then you press the button again, div 3 appears below div 1 and 2. What I have at the moment is this:</p>
  
  <pre><code>&lt;div id="div1" style="display:block;"&gt;
     Some stuff...
  &lt;/div&gt;
  
  &lt;div id="div2" style="display:none;"&gt;
     Some stuff...
  &lt;/div&gt;
  
  &lt;div id="div3" style="display:none;"&gt;
     Some stuff...
  &lt;/div&gt;
  
  &lt;a&gt;&lt;img id="button" src="img/button.png" onclick="myFunc()" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>function myFunc() {
      var d2 = document.getElementById("div2");
      var d3 = document.getElementById("div3");
  
      if ( d2.style.display == "none" ) {
          d2.style.display = "block";
      }
  
      if ( d2.style.display == "block" ) {
          d3.style.display = "block";
      }
  }
  </code></pre>
  
  <p>This is what I've got, but it displays div2 and div3 at the same time. Any idea on how to do it will be very much appreciated!</p>