Acordeones y transiciones

Siempre que queremos ejecutar alguna acción sobre una etiqueta debemos hacer click en ella y para interactuar, el CSS no es suficiente, necesitamos JavaScript para que el navegador actué así que, para crear acordeones, hay que combinar ambas cosas.

Un acordeón no es mucho más que una serie de enlaces que nos permiten mostrar y ocultar contenidos de tal manera que sólo uno de ellos es visible; cuando se muestra el seleccionado, los demás se ocultan y de ese modo, el espacio utilizado se optimiza.

Hay muchos métodos para crear esto y este sólo es una demostración del concepto básico.

<div id="demoA">
  <a onclick="demoacordeon('primero');" href="javascript:void(0);">primero</a>
  <div id="primero" class="visible">
    <p> ....... el contenido ....... </p>
  </div>
  <a onclick="demoacordeon('segundo');" href="javascript:void(0);">segundo</a>
  <div id="segundo" class="novisible">
    <p> ....... el contenido ....... </p>
  </div>
  <a onclick="demoacordeon('tercero');" href="javascript:void(0);">tercero</a>
  <div id="tercero" class="novisible">
    <p> ....... el contenido ....... </p>
  </div>
</div>

Dentro de un DIV contenedor, ponemos una sucesión de enlaces y otros DIVs con los contenidos, identificados con un ID exclusivo. Cada enlace ejecutará la función de JavaScript enviándole el ID.

<script>
//<![CDATA[
  var abierto = "primero"; // definimos el que estará abierto
  function demoacordeon(cual) {
    var mostrar = document.getElementById(cual); // el que vamos a mostrar
    var actual = document.getElementById(abierto); // el que vamos a ocultar
    if(mostrar==actual) {return false;} // si es el mismo no hacemos nada
    // permutamos sus clases
    actual.className="novisible";
    mostrar.className="visible";
    abierto = cual; // guardamos el que está abierto
  }
//]]>
</script>

Para simplificar todo, cada contenido tiene una clase CSS. Si es visible es la clase visible y para deslumbrar con nuestra originalidad, cuando no es visible la llamamos novisible:

<style>
  #demoA { /* al div contenedor lo dimensionamos y centramos */
    margin: 0 auto;
    width: 500px;
  }
  #demoA a { /* establecemos las propeidades de los enlaces o botones */
    background-color: #456;
    box-shadow: 0 0 4px #ABC inset;
    display: block;
    font-size: 16px;
    height: 2em;
    line-height: 2em;
    margin: 1px 0;
    padding-left: 20px;
  }
  #demoA a:hover {
    box-shadow: 0 0 12px #ABC inset;
    color: #EEE;
  }
  #demoA div { /* los contenidos */
    overflow:hidden;
    text-align: center;
    /* cada cambio se realizará con un efecto animado ¨*/
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  #demoA div.visible {
    /* el visible tiene borde y una cierta altura */
    border: 1px solid #456;
    height:100px;
  }
  #demoA div.novisible {
    /* el oculto no tiene borde y su altura es cero */
    border: 1px solid transparent;
    height:0px;
  }
</style>

primero

Proin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.

segundo

Proin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.

tercero

Suspendisse a ipsum nisi. Vestibulum a sapien sem, eu ultricies tellus. Vestibulum arcu diam, varius in malesuada ut, lacinia nec turpis. Aliquam erat volutpat. Duis vitae magna at nunc ornare facilisis quis eu augue. Curabitur ut urna nulla! Donec in enim ac ligula malesuada cursus.