title: How to load an the next element upon a button click
body: <p>How can I show the next p after the last p that has a <code>display:block</code></p>
  
  <pre><code>&lt;p id="test1"&gt;test1&lt;/p&gt;
  &lt;p id="test2"&gt;test2&lt;/p&gt;
  
  &lt;p id="test3"&gt;test3&lt;/p&gt;
  
  &lt;button onclick=""&gt;show next p&lt;/button&gt;
  </code></pre>
  
  <p>noting that in CSS by default:</p>
  
  <pre><code>#test1 {display:block;}
  #test2, #test3 {display:none;}
  </code></pre>