title: How to show next article on click of a button
body: <p>I need to hide and show different articles on click of a button. This is like step by step instruction. Here I have the code block below</p>
  
  <pre><code>&lt;article class="content-1"&gt;Content 1
      &lt;button type="button" class="continue"&gt;Continue&lt;/button&gt;
  &lt;/article&gt;
  &lt;article class="content-2"&gt;Content 2
      &lt;button type="button" class="continue"&gt;Continue&lt;/button&gt;
  &lt;/article&gt;
  &lt;article class="content-3"&gt;Content 3
      &lt;button type="button" class="continue"&gt;Continue&lt;/button&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.continue').click(function()
      $(this).parents('div').next('article').show();
  });
  </code></pre>
  
  <p>Now on click of the <code>.continue</code> <code>button</code> I need to hide the present article and show the next article. Can anyone help me out to solve this thanks in advance.</p>
  
  <p>Note: Reaching the last <code>article</code> should stop the function.</p>
  
  <p><strong><a href="http://jsfiddle.net/benjaminthomas/kaqr6ysn/11/" rel="nofollow">DEMO</a></strong></p>