show only first element in a group using jquery

Introduction:

In this post, find jQuery code to show only first element within a group or container or div element. You must have seen this feature on Facebook. If you have not seen, then go to Facebook -> Photos -> Click on Album tab. Take mouse on any album, and you will find other images are getting previewed. But the point is, when the page was loaded only first item was visible and rest were hidden.

HTML:

First Item
Second Item
Third Item




First Item in 2nd Div
Second Item in 2nd Div
Third Item in 2nd Div
Fourth Item in 2nd Div




    
    
    

JS:

$(document).ready(function () {
    $('#btnReset').click(function () {
        $("div.List").each(function () {
            $("ul li:not(:first)", this).show();
            $("img :not(:first)", this).show();
        });
    });
    $('#btnHide').click(function () {
        $("div.List").each(function () {
            $("ul li:not(:first)", this).hide();
            $("img :not(:first)", this).hide();
        });
    });
});