show first 5 list items of all unordered lists
show first 5 list items of all unordered lists and only on click link show the rest of the items
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-3">
<div class="category-overview-list" id="left">
<h4>Specials</h4>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
<li>test 6</li>
<li>test 7</li>asdfasdfas
<li>test 8</li>
<li>test 9</li>
</ul>
<div class="control"></div>
</div>
<div class="category-overview-list" id="right">
<h4>Specials</h4>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
<li>test 6</li>
<li>test 7</li>
<li>test 8</li>
<li>test 9</li>
</ul>
<div class="control"></div>
</div>
</div>
CSS
#right{
float:right;
}
#left{
float:left;
}
JavaScript
$('.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 () {
//$this=$(this);
$('.category-overview-list').each(function () {
//alert ("");
var ul = $(this).children("ul"),
l = ul.children('li'),
h = l.height();
var me = $(this).find('.control');
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');
me.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');
me.html('<a href="#">show more <i class="fa fa-plus"></i></a>');
}
});
return false;
});