Show more and less content using jquery

index.html

<div class="grid__item one-quarter footer-cat-list"><div class="Block CategoryList Panel">
    <h4>Categories</h4>
    <div class="BlockContent">
        <ul class="sf-menu sf-horizontal sf-js-enabled">
<li style="display: none;"><a href="#">Shop By Subject</a></li>
<li style="display: none;"><a href="#">Shop By Color </a></li>
<li style="display: none;"><a href="#">Shop By Design/Shape</a></li>
<li><a href="#">Panoramic Wall Art</a>
</li>
<li><a href="#">Vertical Wall Art</a></li>
<li><a href="#">1 Piece Canvas Wall Art</a>
</li>
<li><a href="#">2 Piece Canvas Wall Art</a>
</li>
<li><a href="#">3 Piece Canvas Wall Art</a>
</li>
<li><a href="#">4 Piece Canvas Wall Art </a>
</li>
<li><a href="#">5 Piece Canvas Wall Art</a>
</li>
<li><a href="#">Samples of our canvas artwork</a></li>
<li><a href="#">Black and White Canvas Art</a></li>

</ul>

    </div>
</div></div>

<script>
  $(document).ready(function(){
        $('.footer-columns div.one-quarter').each(function(){
         if($(this).find('ul.sf-menu>li>a').length > 10) {
            var obj = $(this).find('ul.sf-menu');
            $('<strong><a href="javascript:void(0);" class="ToggleList">Show all</a></strong>').insertAfter(obj);
         }
         var i = 0;
         $(this).find('ul.sf-menu>li>a,ul.treeview>li>a').each(function(){
            if(i >= 10) {
                $(this).closest('li').css('display','none');
            }
            i++;
         });
        });

        $('.footer-columns .ToggleList').on('click',function() {
            $(this).parent().siblings('ul').children('li:gt(9)').slideToggle('fast');
            $(this).text($(this).text() == 'Show all' ? 'Show less' : 'Show all');
        });

   });
</script>