Comment folding demo

by odiseo

HTML

<div class="postbox" id="post-1">
    <div class="aPost" >Un post principal</div>
    <a href="#" class="showallcomments">Show all comments</a>
    <div class="comments">
        <div class="aComment">Comentario A</div>
        <div class="aComment">Comentario B</div>
        <div class="aComment">Comentario C</div>
        <div class="aComment">Comentario D</div>
        <div class="aComment">Comentario E</div>
    </div>
</div>
<hr />
<div class="postbox" id="post-2">
    <div class="aPost" >Un post principal</div>
    <a href="#" class="showallcomments">Show all comments</a>
    <div class="comments">
        <div class="aComment">Comentario Aa</div>
        <div class="aComment">Comentario Bb</div>
        <div class="aComment">Comentario Cc</div>
        <div class="aComment">Comentario Dd</div>
        <div class="aComment">Comentario Ee</div>
    </div>
</div>
<hr />
<div class="postbox" id="post-3">
    <div class="aPost" >Yet another post principal</div>
    <a href="#" class="showallcomments">Show all comments</a>
    <div class="comments">
        <div class="aComment">Comentario Aaa</div>
        <div class="aComment">Comentario Bbb</div>
        <div class="aComment">Comentario Ccc</div>
        <div class="aComment">Comentario Ddd</div>
        <div class="aComment">Comentario Eee</div>
    </div>
</div>

JavaScript

$('.showallcomments').bind('click', function() {
    var commentsArray = $('.comments').find('.aComment');
    var miPostPadre = $(this).closest('.postbox');
    console.log('Post padre del link');
    console.log(miPostPadre );
    var miId = miPostPadre.attr('id');
    console.log(miId);
    var miselector = '#'+miId;
    var subComentarios = $(miselector).find('.aComment');
    $.each(subComentarios , function(index, element) { 
        $(element).css("visibility", "visible");
    });    
});


//oculta todos los comentarios menos los ultimos dos
var commentsSectionArray = $('.comments');
$.each(commentsSectionArray, function(i, seccionDeComentarios) { 
        var comentariosParaCadaPost = $(seccionDeComentarios).find('.aComment');
        $.each(comentariosParaCadaPost , function(j, comentarioPorPost) {   
            if(j>= comentariosParaCadaPost .length - 2) {
                $(comentarioPorPost).css("visibility", "visible");
            }
            else {
                $(comentarioPorPost).css("visibility", "hidden");
            }        
        });            

});