more / less link

jQuery more / less link to show more or show less elements

HTML

<ul id="tinyMenu">
    jbjkbnkjnknkj
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
    <li><a href="#">Menu Link</a></li>
</ul>
<a href="#" id="showMore" class="more">more</a>

CSS

html,body{
    background:#FFF;
    font-family:helvetica;
}
#tinyMenu {
    list-style:none;
}
#tinyMenu li{

}
#tinyMenu li a{
    color:#333;
    text-decoration:none;
}
#showMore{
    color:green;
    text-decoration:none;
}
.more:before{
    content:"+ ";
}
.less:before{
    content:"- ";
}

JavaScript

$(document).ready(function() {
    
    jQuery(function($) {
        
        var visible = 5;
        var $myText = $('#tinyMenu li');
        var max = $myText.length;
        var showMore = "more";
        var showLess = "less";
        
        function moreLess(index) {
            $myText.hide();
            $myText.slice(0, index).show();
        }
    
       // moreLess(visible);
    
        $('#showMore').on('click', function(e) {
            e.preventDefault();
            if($(this).hasClass("more")){
                grow = visible + max;
                if (grow > max) grow = max;
               
                $(this).text(showLess),
                $(this).removeClass("more"),
                $(this).addClass("less");
                moreLess(grow);
            }
            else
            {
                shrink = visible;
                if (shrink < 0) shrink = 0;
               
                $(this).text(showMore);
                $(this).addClass("more");
                $(this).removeClass("less");
                moreLess(shrink);        
            }

        });
  
    });
    
 });