Show/Hide extra <li>

by kalmarsh80

HTML

<ul>
    <li class="li-static">hi</li>
    <li class="li-static">why</li>
    <li class="li-static">me</li>
    <li class="li-extra">x1</li>
    <li class="li-extra">x2</li>
    <li class="li-extra">x3</li>
    <li class="li-toggler">Show More</li>
</ul>
<hr>
    <ul>
    <li class="li-static">hi</li>
    <li class="li-static">why</li>
    <li class="li-static">me</li>
    <li class="li-extra">x1</li>
    <li class="li-extra">x2</li>
    <li class="li-extra">x3</li>
    <li class="li-toggler">Show More</li>
</ul>

CSS

ul li.li-static, ul li.li-toggler{
    display:list-item;
}
ul li.li-extra{
    display:none;
}

JavaScript

$(".li-toggler").click(function(){
    if( $(this).parent().find('.li-extra').first().css('display') == 'none'){
        $(this).parent().find(".li-extra").slideDown();
        $(this).text('Hide');
    }else{
        $(".li-extra").slideUp();
        $(this).text('Show More');
    }
});