title: jquery slideDown and slideUp() not working for partial showing
body: <p>Is it possible to show and hide partially with jquery sliding functions?</p>
  
  <p>Basically, there's a list with 7 items. But only the 1st two are showing initially, while the rest is hidden. I want that when the user clicks to view more, all 7 items should show. And when he/she clicks again only the 1st two are showing and the rest is hidden again. But I can't manage to do it. Please give me some light, thanks.</p>
  
  <p>jquery:</p>
  
  <pre><code>var ul = $('ul'), 
      showMoreLnk = $('a.show-more');
  
  $('a').click(function(e){
  
    if(ul.outerHeight() === 38){
      ul.find('li.hide').removeClass('hide').addClass('show');
  
      ul.slideDown(function(){
          showMoreLnk.text('Show less');
      });
  
    } else {
      ul.slideUp(function(){
          showMoreLnk.text('Show more');
          ul.find('li.show').removeClass('show').addClass('hide');
      });
    }
  
    e.preventDefault();
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li class="hide"&gt;Item 3&lt;/li&gt;
    &lt;li class="hide"&gt;Item 4&lt;/li&gt;
    &lt;li class="hide"&gt;Item 5&lt;/li&gt;
    &lt;li class="hide"&gt;Item 6&lt;/li&gt;
    &lt;li class="hide"&gt;Item 7&lt;/li&gt;
  &lt;/ul&gt;
  &lt;a href="#" class="show-more"&gt;show more&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hide{
    display: none;
  }
  .show{
    display: block;
  }
  </code></pre>