Multiple Definition List FAQ Toggle (TJK_DL)

En PanCanal y algunos sitios de nuestra Intranet hemos implementado la presentación de información en forma de FAQ (Frequently Asked Questions). Básicamente es mostrar listado largo de items que al ser cliqueados expandan más la información, en este caso la respuesta a una pregunta.  Un ejemplo público esta en Canal FAQs, y esto, lo implementamos rápidamente en ese entonces con el Javascript DL Toggle de TJK_DL.

Pero, -que pasa cuando las cosas se ponen más complejas? Digamos múltiples Listas de Definición (DLs) en una misma página.

La solución a ese problema es sencilla. En vez de poner el id="TJK_DL" a cada DL: <dl id="TJK_DL">, le ponemos el id="TJK_DL" a un wrapping DIV: <div id="TJK_DL">  fuera de todo conjunto de Definition Lists de la página.

Código ejemplo:

<div id="TJK_DL">

<h2>2009</h2>

<dl>

<dt>Agosto 2009</dt>

<dd>

<ul>

<li><a href="#">27 de Agosto: 09-04</a></li>

</ul>

</dd>

<dt>Julio 2009</dt>

<dd>

<ul>

<li><a href="#">30 de Julio: 09-03</a></li>

<li><a href="#">14 de Julio: 09-02</a></li>

</ul>

</dd>

</dl>

<h2>2008</h2>

<dl>

<dt>Diciembre 2008</dt>

<dd>

<ul>

<li><a href="#">27 de Diciembre: 08-04</a></li>

</ul>

</dd>

</dl>

<h2>2007</h2>

<dl>

<dt>Noviembre 2008</dt>

<dd>

<ul>

<li><a href="#">30 de Noviembre: 08-03</a></li>

<li><a href="#">14 de Noviembre: 08-02</a></li>

</ul>

</dd>

<dt>Octubre 2008</dt>

<dd>

<ul>

<li><a href="#">1 de Octubre: 08-01</a></li>

</ul>

</dd>

</dl>

</div>

Claro, que lo óptimo sería sentarnos a buscar esta solución con YUI que es la librería que utilizamos ahora...