Ramirez Ramirez - 3 months ago 11
jQuery Question

jQuery show only 5 list items of multiple unordered lists

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

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!