Todos los que usamos los nuevos comentarios, y por supuesto los lectores, tenemos la opción de ocultar las respuestas a un comentario. Pues aquí he realizado un script para poder ocultar sólo lo de dentro, es decir, el contenido del comentario, y que se vea quién ha hecho el comentario.

Lo que hacemos es “cambiar” el botón de blogger por uno propio que podéis editar por CSS, y añadir unos botones para expandir y contraer a los comentarios del primer nivel. Además, al principio, está la opción de ocultar y contraer todos.

Podéis ver el resultado en este blog de pruebas con un nuevo diseño experimental, o en este mismo blog

El CSS

Para ocultar la flecha de blogger:

.thread-toggle{display:none!important}

Aquí os dejo el resto de mis estilos:


.comments h4 {
display: table;
}
.comment-button {
background: #EEE;
color: #2C2C2C;
margin-left: 7px;
float: right;
box-shadow: 0 0 5px rgba(0,0,0,.2);
border: 1px solid #BBB;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
}
.replies-individual {
float: left;
}
El script

$(function(){
//Ocultar y mostrar todos
$('#comments >h4').before('<div style="float:right"><div class="comment-button" id="mostrar-todos">Mostrar todos</div><div class="comment-button" id="ocultar-todos">Ocultar todos</div><div style="clear:both"></div></div>');
//Botón de respuestas
$('.thread-toggle').after('<div class="comment-button replies-individual">Respuestas</div><div style="clear:both"></div>');
//Abrir comentario
$('.comment').not('.comment .comment').find('.comment-actions:first').append('<div class="comment-button abrir-comentario">Expandir/contraer</div><div style="clear:both"></div>');
//Funciones al hacer click
$('#mostrar-todos').click(function(){
$('blockquote.comment-content').slideDown();
});
$('#ocultar-todos').click(function(){
$('blockquote.comment-content').slideUp();
});
$('.replies-individual').click(function(){
$(this).closest('.comment-replies').find('blockquote.comment-content').slideToggle();
});
$('.abrir-comentario').click(function(){
$(this).closest('.comment-block').children('blockquote.comment-content').slideToggle();
});
});

Si queréis que aparezca el botón de “Expandir/contraer” en todos, tenéis que borrar .not('.comment .comment'),y si queréis ocultar todos las respuestas a la vez, cambiar lo que hay en $('.replies-individual').click(function(){ por esto:

$(this).closest('.comment-replies').find('.thread-expanded').slideToggle();

Espero que os haya sido útil. Cualquier duda, comentario… decidlo, que yo os responderé con gusto.

10 pensamientos en “Expandir y contraer los nuevos comentarios con estilo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.