Expandir/Contraer entradas con jQuery en Blogger

jQuery tiene una función llamada .toggle con la que podemos mostrar/ocultar contenido sin necesidad de construir un script complicado, utilizaremos esta función junto con los atributos "expr" (Que en otro tutorial explicaré) para que así que detecte el ID de cada entrada y podamos establecer el valor dinámicamente.

Lo interesante de esto es que podemos reducir el tamaño del blog a nivel visual, haremos que cada entrada por defecto esté oculta y que sólamente se muestre cuando el usuario intervenga.

Para comprobar el efecto puedes revisar este blog de pruebas, recuerda que el efecto sólo aparecerá en la página principal.

El tutorial: 

Lo básico que debes entender es que la función se puede llamar de una sencilla forma, la cual es la siguiente:

$('.objetivo).toggle();

Recordando que necesitas especificar un evento a otro elemento el cual será presionado para ocultar al que se definió en la línea actual:

$('.presioname').click(function() {
  $('.objetivo).toggle();
});

Si no estás familiarizado con jQuery o javascript no te preocupes, en la documentación de .toggle jQuery puedes encontrar ejemplos sencillos con los que entenderás mejor.

Paso 1: Editando la plantilla e incluyendo la función dinámicamente:

Lo que haremos será buscar la etiqueta que define el cuerpo de las entradas (Primero presiona en "Expandir plantillas de artilugios"):

<data:post.body/>

Esta etiqueta la encerraremos en un contenedor el cual llevará el ID de cada post. Reemplaza el código anterior por el siguiente:

 <div class='ocultar-div' expr:id='data:post.id' style='display:none;'><data:post.body/></div>

Lo que está destacado en verde corresponde al atributo "expr" que mencioné al principio de la entrada, permite obtener dinámicamente el ID del contenedor, mientras lo que está en rojo es lo que por defecto oculta las entradas.

Paso 2: Añadiendo el botón para mostrar/ocultar el contenedor:

Lo que haremos con el atributo "expr" ahora será para crear una función javascript, la cual será "onclick" (Se iniciará la función cuando hagamos clic en el elemento):

<input class="ocultar" type="button" value="[+/-]"  expr:onclick='"$("+ "&#39;#" +data:post.id + "&#39;).toggle(200);"' />

Lo que permite este código es hacer la llamada al ID que anteriormente asignamos dinámicamente, pega este código arriba del anterior, quedará de la siguiente manera:

<input class="ocultar" type="button" value="[+/-]"  expr:onclick='"$("+ "&#39;#" +data:post.id + "&#39;).toggle(200);"' />
<div class='ocultar-div' expr:id='data:post.id' style='display:none;'><data:post.body/></div>

Paso 3: Ocultando los elementos en las entradas:

Ahora para que nuestro efecto se vea únicamente en la página principal, lo que haremos será recurrir a las condicionantes, ocultaremos este código encerrándola en la condicionante "index", además de encerrar en un <b:else/> si la condición no se cumple:

<b:if cond='data:blog.pageType == "index"'>
<input class="ocultar" type="button" value="[+/-]"  expr:onclick='"$("+ "&#39;#" +data:post.id + "&#39;).toggle(200);"' />
<div class='ocultar-div' expr:id='data:post.id' style='display:none;'><data:post.body/></div>
<b:else />
<data:post.body/>
</b:if>

Paso 4: Añadiendo CSS al botón:

Si estás de acuerdo conmigo y consideras que es necesario añadir CSS al botón puedes hacerlo mediante la clase .ocultar, veamos un ejemplo:

.ocultar {
background:#666; /*Color de fondo*/
color:white; /*Color del texto*/
border:1px solid #FFF; /*Color y formato del borde*/
box-shadow:0 0 1px #CCC; /*Sombra*/
}

Recuerda que el código deberás pegarlo antes de ]]></b:skin>