list limiting

by abenrob

HTML

<div id="main" class="group">Items:
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <a href="#" id="trigger" class="hiding">show more...</a>
</div>

<div id="notmain" class="group">More Items:
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <a href="#" id="trigger" class="hiding">show more...</a>
</div>

CSS

.hideme {
    display: none;
}

JavaScript

$("#main > .item:gt(2)").addClass('hideme');
if ( $('#notmain > .item').length <= 3 ){
    $('#notmain').children('#trigger').addClass('hideme')
};
$("#trigger").on('click', function(e){
    var triggerClass = $(e.target).attr('class');
    if (triggerClass == 'hiding'){
        $(e.target).siblings('.item').removeClass('hideme');
        $("#trigger").removeClass('hiding');
        $("#trigger").addClass('showing');
        $("#trigger").html('show less...');
    } else if (triggerClass == 'showing') {
        $(e.target).siblings('.item:gt(2)').addClass('hideme');
        $("#trigger").removeClass('showing');
        $("#trigger").addClass('hiding');
        $("#trigger").html('show more...');
    }
});