Question

I have the following code snippet and require to show only the first 2 <LI> and hide all the other <LI>. How can i acheive this? I basically need to toggle the show and hide on a button click using jquery.

Code Snippet:

<UL>
  <LI/>
  <LI/>
  <LI/>
  <LI/>
  <LI/>
</UL>

Answer 1

You can use the :gt selector to select elements above a specified index. As elements are 0-indexed, everything above index 1 is selected:

$("#someButton").click(function() {
    $("li:gt(1)").toggle();
});

The toggle method hides elements that are currently visible, and shows elements that are currently hidden. Therefore, clicking #someButton will repeatedly toggle the li elements at index > 1 between hidden and visible.

It’s probably also worth mentioning that there is an :lt selector that allows you to perform precisely the opposite sort of selection.