title: How to get consecutive elements using jquery?
body: <p>Please look through the following code snippet - </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="aclass"&gt;
     &lt;h1&gt;This is heading one&lt;/h1&gt;
     &lt;p&gt;This is paragraph one, this will be hidden automatically&lt;/p&gt;
     &lt;p&gt;This is paragraph two, this will be hidden automatically&lt;/p&gt;
     &lt;p&gt;This is paragraph three, this will be hidden automatically&lt;/p&gt;
     &lt;h1&gt;This is heading two&lt;/h1&gt;
     &lt;p&gt;This is paragraph four, this will be hidden automatically&lt;/p&gt;
     &lt;p&gt;This is paragraph five, this will be hidden automatically&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.aclass p {display:none;}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
      $('.aclass h1').click(function(){
          $(this).next('p').toggle();
      });
  });
  </code></pre>
  
  <p>This JS code toggles the display of a single p tag after the h1 tag when clicked on the h1 tag. But I need to toggle the display of consecutive p tags (one to three when clicked on heading one)</p>
  
  <p>What should be the jQuery code to do so?</p>