Show only first element in container using jQuery

by jquerybyexample

HTML

<div class="List">
    <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
    </ul>
</div>
<div class="List">
    <ul>
        <li>First Item in 2nd Div</li>
        <li>Second Item in 2nd Div</li>
        <li>Third Item in 2nd Div</li>
        <li>Fourth Item in 2nd Div</li>
    </ul>
</div>
<br/>
<div class="List">
    <img src="http://3.bp.blogspot.com/-cwyuC2nXFN8/UM2BmZlGPrI/AAAAAAAAFBM/V9__Kf04Bl4/s1600/Facebook-64.png"
    />
    <img src="http://1.bp.blogspot.com/-DIA_fSsrbhI/UM1-9qBBI7I/AAAAAAAAE_w/ZWG6ESy8f9o/s1600/twitter.png"
    />
    <img src="http://3.bp.blogspot.com/-wl74VyJjyQo/UM2ECnmOzGI/AAAAAAAAFBU/7RARYpvC_g8/s1600/1355645642_rss64.png"
    />
    <img src="http://2.bp.blogspot.com/-cxgXkCPH_wM/UM2EDfBnwaI/AAAAAAAAFBY/_koBnbI3xiw/s1600/1355645906_contact.png"
    />
</div>
<br/>
<input type="button" id="btnHide" value=" Show only first item " />
<input type="button" id="btnReset" value=" Reset" />

CSS

body {
    font-family:Arial;
    font-size:10pt;
}

JavaScript

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