title: Dynamically hide / show the next list item. jQuery
body: <p>Im dynamically populating a UL list. This could contain 1 up to 5 items</p>
  
  <p>I want to be able to show the first list item, and then on a click of a button in that list item hide it and show the next.</p>
  
  <p>I have this so far - </p>
  
  <p>HTML Structure</p>
  
  <pre><code>&lt;ul class="grid"&gt;
     &lt;li class="object"&gt;
       List Item 1
       &lt;a class="show-next"&gt;Show the next list item&lt;/a&gt;
     &lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('.grid .object').hide().filter(':lt(1)').show();
  $('.show-next').click(function(){
      $(".grid").find(".object").hide().next().show();
  });
  </code></pre>
  
  <p>This code unfortunately is showing all the list items in the UL instead of just the next one.</p>
  
  <p>Anyone give me a hand?</p>
  
  <p>Thanks</p>