¡Buenas!

En este post voy a mostrar una forma simplísima de crear estas típicas cajas desplegables en las que haces clic y se muestra (u oculta) el contenido.

 

En realidad es muy fácil de hacer: tomará poco más de 20 líneas de código JS.

 

El HTML

Lo primero será definir la estructura que tendrán estos contenedores: un DIV principal que almacenará (e identificará) cada contenedor diferente, y dentro de éste dos DIVs más: Uno con el título del spoiler, y otro con el contenido del mismo. Éste último aparecerá oculto por defecto.

<!DOCTYPE html>
<html>
<head>
    <title>Prueba de contenedores desplegables</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
</head>
<body>

<div class="spoiler-box">
    <div class="spoiler-title">Título del contenedor (¡clickéame!)</div>
    <div class="spoiler-content">
        Contenido del contenedor. Yo desaparezco y aparezco conforme hagas clic en el título.
    </div>
</div>


<script type="text/javascript" src="spoilers.js"></script>

</body>
</html>

Ese será el código que tendremos en el documento HTML. Constará únicamente de un contenedor, pero la idea es hacer un sistema que permita tener una cantidad (teóricamente) ilimitada.

 

El CSS

Vamos a darle un poco de estilo a la cosa, para que se vea bien:

body {
    font:13pt Calibri;
    color: #333;
}
.spoiler-box {
    overflow: hidden;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;

    -webkit-box-shadow: 0 0 4px #AAA;
    -moz-box-shadow: 0 0 4px #AAA;
    -o-box-shadow: 0 0 4px #AAA;
    box-shadow: 0 0 4px #AAA;
}
.spoiler-box .spoiler-title {
    background-color: green;
    color: white;
    font-weight: bold;
    padding:0.4em 0.6em;
}
.spoiler-box .spoiler-title:hover {
    cursor: pointer;
}
.spoiler-box .spoiler-content {
    background-color: #EEE;
    padding:0.4em 0.6em;

    display: none;
}

 

El JavaScript

Lo siguiente (y último) será el código JS, que se basará en obtener una lista de todos los DIVs con la clase spoiler-box, y recorrerlos uno a uno para obtener su respectivo spoiler-title y spoiler-content, y añadir un evento click en éstos.

window.addEventListener('load', function() {

    var spoilers = document.getElementsByClassName('spoiler-box');

    for(var i = 0; i < spoilers.length; i++) {
        var title = spoilers[i].getElementsByClassName('spoiler-title');
        var content = spoilers[i].getElementsByClassName('spoiler-content');

        if(!title || !content || !title.length || !content.length)
            continue;

        title = title[0];
        title.box = content[0];

        title.title = 'Clic para abrir';

        title.addEventListener('click', function() {
            this.box.style.display = (this.box.style.display == '') ? 'block' : '';

            this.title = this.title == 'Clic para abrir' ? 'Clic para cerrar' : 'Clic para abrir';
        });
    }

});

Y listo. Al cargar el sitio, este script debería ejecutarse, y los contenedores desplegables deberían funcionar.

 

Como siempre, dejo un ejemplo del funcionamiento, y todo el código fuente en Github.

 

Y… ¡creo que eso ha sido todo!

Uf, éste fue cortito, pero me parece bastante útil este tipo de utilidades en un sitio web.

 

¡Saludos!