Toggle casero hecho con jQuery sin estilos

1. El toggle es algo tan sencillo como un grupo de desplegables. Imaginad una
página de preguntas frecuentes donde sólo sean visibles los títulos y que, al
clicarlos, se desplegara el contenido. Si se vuelven a clicar, el contenido
desplegado se vuelve a esconder. Parece complicado, verdad? Pues no lo es.
Tal vez os pique la posibilidad de a adir un plugin para crear esto, pero nosñ
encontraremos con que tenéis que descargar un montón de archivos,
imágenes y archivos con montones de líneas que realmente no os hacen
falta. Todo el código basura termina por ralentizar nuestra web y deberíamos“ ”
evitarlo. En este caso lograremos un toggle con 5 líneas de código... No está
mal!
jQuery es una librería de JavaScript, es decir, no es un lenguaje propiamente
dicho, sino una forma fácil de hablar Java. Las órdenes son más sencillas e
intuitivas por lo que, con pocas líneas se pueden conseguir efectos bonitos y
llamativos.
Para empezar crearemos una lista desordenada <ul> donde cada elemento de
lista <li> contendrá el título a mostrar. Dentro de cada elemento de lista
podemos introducir otra lista, un párrafo, imágenes... Lo que necesitemos.
<ul>
<li><h3 class="titulo">Esto es un titular pequeño</span>
<ul class="contraido">
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</li>
</ul>
</li>
<li><h3 class="titulo">Esto es un titular largo y aburrido, o no,
quien sabe</span>
<ul class="contraido">
<li>Lorem ipsum dolor
<div>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
Toggle
Septiembre - 2013

2. exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<ul>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
<li>Listado</li>
</ul>
<div>
</li>
</ul>
</li>
</ul>
Lógicamente aquí podemos a adir todas las class o id que necesitárais parañ “ ” “ ”
poner estilos posteriormente. Hoy no vamos a trabajar estilos por lo que
quedará bastante feo visualmente. Lo que nos interesa es que funcione!
Ya tenemos nuestra lista. A adid lo que queráis pero mantened lañ
class="contraido" y la class="titulo" para que funcione (o cambiad los
atributos en el query.
Lo primero que hay que hacer, como siempre, es la llamada al archivo .js. Se
puede poner el enlace directo o bajarnos el archivo.
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.10.2.js"></script>
En el head, por ejemplo, abrimos una etiqueta de script y a adimos loñ
siguiente.
Con esta frase preparamos el DOM para recibir las funciones pertinentes:
$(document).ready(function() {
A continuación escondemos todo aquello que tenga la class contraido para“ ”
que no se vea de inicio:
$("ul.contraido").hide();
Ahora viene la clave:
$('.titulo').click(function () {
$(this).next('ul.contraido').slideToggle();
});
Aquí le hemos dado la función con un click y la orden de deslizar. Hay
muchas más pero esta en especial se usa mucho y a título personal me gusta

3. porque queda bonita y simple.
El término toggle lo podríamos entender como una mezcla entre slideUp y“ ”
slideDown, es decir, que sube y baja alternativamente cada vez que lo haces
funcionar.
Por último, pensando en nuestro amigo Iexplorer, podríamos a adir una fraseñ
más al script:
$('ul li').css('display', 'none');
De esta manera le estamos diciendo que, si el javascript está desactivado (cosa
que ocurre en algunas versiones antiguas, los desplegables estarán a la vista.
Es decir, no funcionaría de manera bonita pero el usuario no se perderá
nuestro contenido. Es importante que en el primer paréntesis incluyérais todos
los elementos necesarios.
Ya sólo nos quedaría a adir estilos, imágenes de fondo, bordes, efectos deñ
hover y demás para que nos quedara un desplegable de lo más decente.
Obviamente hay más formas de hacerlo y puede que haya otras más
efectivas, pero con esto ya es suficiente para hacer un buen trabajo a adiendoñ
luego una capa de css.
Si encontráis algún problema avisad :)
Encontraréis todo lo referente a toggle en:
http://api.jquery.com/toggle/
Y para los más vagos, aquí os dejo el código completo. Recordad que si
cambiáis el contenido del html tendríais que cambiar aquí también:
<script>
$(document).ready(function() {
$('ul li').css('display', 'none');
$("ul.contraido").hide();
$('.titulo').click(function () {
$(this).next('ul.contraido').slideToggle();
});
});
</script>