jQuery - Hide Extra List Items
Introduction
(The previous version of this demonstration worked with version 1.3.1 of the jQuery library, but not with v1.4.2. This version works with the v1.4.2 version of the jQuery library, and it's much tidier to boot.) This is a handy way to tidy up long lists. This will hide extra items in a list, and add a "show more / fewer" control to show and hide the extra items in the list.
The Solution
For any unordered list with the specified class, this jQuery script will hide the fourth and higher elements in the list, and a link to show all of the list items. When that link is clicked, all list items are displayed, and that link is replaced by one that hides the extra items again.
- One
- Two
- Three
- Four
- Five
- Six
- Seven
- Eight
Code
$(document).ready(function(){
$("ul.collapse").find("li:gt(4)").hide();
$("ul.collapse").has("li:nth-child(5)").after("Show/Hide
");
$("p.showhide").click(function() {
$("ul.collapse").find("li:gt(4)").toggle("slow");
});
});
When the page is loaded, the jQuery script looks at each unordered list with the collapse class. The script hides the 6th and higher lis, and adds the "Show/Hide" link.
The showAll() and showFewer() functions toggle the visibility of their associated links, shows the appropriate other link, and then hides the extra list items. It then attaches a toggle function to the show/hide link.
