title: Show next hidden element in div with jQuery
body: <p>I've got a div with a number of similar elements inside, e.g:</p>
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item&lt;/li&gt;
    &lt;li&gt;Item&lt;/li&gt;
    &lt;li&gt;Item&lt;/li&gt;
    &lt;li&gt;Item&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I want to show only the first <code>li</code> when I load the page, and then I want to have a <code>click</code> function in place that loads the <strong>next hidden item</strong> so that two <code>li</code>s are showing. And continue onwards so that each item can be shown with a click from the same button.</p>
  <p>I attempted to hide the first item on load with jQuery, by using <code>addClass</code></p>
  <p>I then wanted to, on click, find the <code>first</code> that <code>hasClass</code> and <code>addClass</code> for the new class.</p>
  <pre><code>$('li').addClass('hide-listings');
  $('li').first().removeClass('hide-listings').addClass('show-listings');
  
  $('#load').click(function() {
    $('li').first().hasClass('hide-listings').removeClass('hide-listings').addClass('show-listings');
  });
  </code></pre>
  <p>However this doesn't work at all. Any ideas on how to do this?</p>
  <h2><a href="http://codepen.io/franhaselden/pen/jbexrm" rel="nofollow noreferrer">Codepen</a></h2>