Question

The following jQuery code calls the ul element, finds the first three li list items within the element and hides the remaining li items. Then, it appends an li element which says “Show more…” and, when clicked, reveals the previously hidden list items.

(jsFiddle at bottom of question)

$('ul')
  .find('li:gt(2)')
  .hide()
  .end()
  .append(
    $('<li>Show more...</li>').click( function(){
      $(this).siblings(':hidden').fadeIn(500);
   })
);

Simple enough. Now, in addition to showing the hidden list items when the user clicks “Show more…”, I need it to also hide the first three list items which are originally left visible. By illustration:

---

What the code currently generates:

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

(click)

 - List Item #1
 - List Item #2
 - List Item #3
 - List Item #4
 - List Item #5
 - Show more...

---

What needs to occur:

 - List Item #1
 - List Item #2
 - List Item #3
 - Show more...

(click)

 - List Item #4
 - List Item #5
 - Show more...

---

For usability purposes, I would also be nice if when “Show more…” is clicked again, the first three list items become visible again and the remaining list elements are hidden.

jsFiddle: http://jsfiddle.net/g9L9R/

Answer 1

See this: http://jsfiddle.net/g9L9R/7/

$('ul')
.find('li:gt(2)')
.hide()
.end()
.append(
  $('<li>Show more...</li>').click( function(){
  $(this).siblings().toggle(500);
})
);​

You will get a nice toggle effect here…