Títulos expandibles en los post de las etiquetas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me pregunta Nixon en un comentario como consigo que al pinchar sobre una de mis pestañas, se vea solamente la lista del título de las entradas y que una vez se pinche sobre uno de los títulos, este se expanda para mostrar la entrada completa.

Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts, si no sabéis como hacerlo, podéis consultar en esta entrada anterior como etiquetar vuestras entradas.

[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.

[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src="URL_DEL_SCRIPT" type="text/javascript">
</script>

[3] Buscamos la parte de este código que se encuentra escrito en color negro, y añadimos la parte del código que está escrita en rojo, colocada tal cual lo veis aquí:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr><td width='40px'>

<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>

<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

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

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:include data='post' name='PeekABooPost'/>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

Solucionando problemas:

Algunas visitas me han comentado que su código no es igual al del truco y que no han podido hacerlo. La diferencia, en casi todos los casos, estaba en que no habían ocultado o eliminado la tabla que sale en las páginas de etiquetas y que dice algo así como "ver más entradas con esta etiqueta". El código de esa tabla es este:

<b:include data='top' name='status-message'/>
<data:adStart/>

La solución, sino queréis quitar u ocultar esa tabla, es colocar el código para los post expandibles, ignorando esa parte, es decir, cuando llegamos a ella, seguimos hacia abajo buscando la parte que necesitamos para colocar el código, y listo.

Nota:
Consulta como ponerle footer a tus entradas expandibles.