Question

Is it possible to show and hide partially with jquery sliding functions?

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.

jquery:

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();

});

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="hide">Item 3</li>
  <li class="hide">Item 4</li>
  <li class="hide">Item 5</li>
  <li class="hide">Item 6</li>
  <li class="hide">Item 7</li>
</ul>
<a href="#" class="show-more">show more</a>

CSS:

.hide{
  display: none;
}
.show{
  display: block;
}

Answer 1

Try this:

$('a').click(function (e) {
       e.preventDefault();
       $('ul li.hide').slideToggle('slow');
});