jQuery show only 5 list items of multiple unordered lists

Question

First of all I am new to jQuery/JS so thank you for your help in advance. Many days I've been trying to find a solution to the following problem: I have a list , which is made from multiple unordered lists with there own items. What I want is show only the first 5 list items of all UL items and only if the "load more" link is clicked, the rest of the list items should be displayed. See printscreen for clarification: http://i61.tinypic.com/swabnq.jpg I know how to do this with one UL, but not with the multiple.

I have already have the following piece of code:

<div class="col-lg-12">
<div class="category-overview">
    <div class="content-title">
        <h3 class="pull-left">Our products</h3>
        <span class="pull-right">
            <a href="#" class="title-toggle-control"></a>
        </span>
    </div>
    <div class="clearfix"></div>
    <div class="grey-divider"></div>
    <div class="clearfix"></div>

    <div class="col-xs-4 col-sm-3 col-md-3">
        <div class="category-overview-list">
            <h4>Title1</h4>
            <ul class="list">
                <li><a href="#">List item 01</a></li>
                <li><a href="#">List item 02</a></li>
                <li><a href="#">List item 03</a></li>
                <li><a href="#">List item 04</a></li>
                <li><a href="#">List item 05</a></li>
                <li><a href="#">List item 06</a></li>
                <li><a href="#">List item 07</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-4 col-sm-3 col-md-3">
        <div class="category-overview-list">
            <h4>Title2</h4>
            <ul class="list">
                <li><a href="#">List item 01</a></li>
                <li><a href="#">List item 02</a></li>
                <li><a href="#">List item 03</a></li>
                <li><a href="#">List item 04</a></li>
                <li><a href="#">List item 05</a></li>
                <li><a href="#">List item 06</a></li>
                <li><a href="#">List item 07</a></li>
            </ul>
        </div>
        etc...
    </div>
</div>
<div class="clearfix"></div>

And JS code:

$('.category-overview-list ul').each(function (i) {
    var ul = $(this),
        l = ul.children('li'),
        h = l.height();
    ul.css({ 'height': (h * 5) + 'px', 'overflow': 'hidden' });
    $(this).siblings('.control').addClass('closed');
    $(this).siblings('.control').html('<a href="#">show more <i class="fa fa-plus"></i></a>');
});
$('.control').click(function () {
    var ul = $(this).parent().children("ul"),
        l = ul.children('li'),
        h = l.height();
    var me = $(this);
    if (me.is('.closed')) {
        ul.parent().children("ul").animate({
            'height': (ul.height() > (h * 5) ?
            (h * 5) : (l.length * h)) + 'px'
        });
        me.removeClass('closed');
        me.addClass('open');
        $(this).html('<a href="#">show less <i class="fa fa-minus"></i></a>');
    } else {
        //ul.css({'height':(h*3)+'px','overflow':'hidden'});
        ul.animate({ 'height': (h * 5) + 'px', 'overflow': 'hidden' });
        me.removeClass('open');
        me.addClass('closed');
        $(this).html('<a href="#">show more <i class="fa fa-plus"></i></a>');
    }
    return false;
});

I really hope someone can help me out with this one.

Answer 1

Working fiddle

Added default height with css, and on click I am running jquery to get all ul tags and increase the height.

I am not using any of your javascript code, I don't know if they clash or if you are using it elsewhere

$('#show_more').click(function() {
    $(".category-overview" ).find( "ul" ).height(100);
});

New fiddle here with dynamic height EDIT: changed it to work with %. eg. first ul has 9 elements => longer => show all 9!