JMiur [E]

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.

12 comentarios:

Puzzle  

Simplemente y sencillamente; BUENÍSIMO!!
Me gusta tanto que lo voy hacer aunque no tenga idea de para que! :D
Pero lo veo tan practico y elegante..

Igual coloco cosas de la sidebar ahí..

un saludo Jmiur, gracias por el aporte.

Responder
Inmortal  

Ohh. sin duda se le puede dar una gran utilidad.

Solo que no me quedo muy claro.

El rpimero Codigo puede ir supongo en las entradas y en Sidebar, por ejemplo.

Pero los otros 2 codigos, van en la plantilla?

Saludos Jmiur, y gracias por el tiempo dedicado.

Responder
JMiur  

Todo puede ir tanto en la plantilla como en un elemento HTML como en una entrada; no hay restricciones al respecto.

Responder
Inma  

JMiur, gracias por tus enseñanzas eres un gran Maestro. Tengo una duda(bueno muchas),desde que han cambiado blogger no soy capaz de encontrar la plantilla HTLM, ¿me podrías decir dónde está?.
Perdona por la simpleza de la pregunta y gracias.

Un saludo

Responder
JMiur  

Saludos, Inma.
Primero que nada, si entras en Blogger "normal", el escuritorio sigue siendo el mismo de siempre ya que el nuevo modelo sólo funciona inggresando por Blogger Draft.

Allí, en cualquiera de los blogs que tengas en al cuenta, al lado del ícono con una casita hay un menú desplegable. Eliges Plantilla y en esa pantalla, abajo de todo dice "Editar Plantilla". Click ahi y se despliegael código.

Responder
Inma  

Muchas gracias JMiur, eres todo un "Maestro".

Saludos

Responder
Luis Reyes  

hola JMiur, que puedo hacer para que mis enlaces del contenido se vean de forma diferente al encabezado del acordeón ya que coloque un enlace dentro del contenido y se igual al encabezado del acordeón.

Responder
Luis Reyes  

a perdon mi blog es este http://cacharpamusic.blogspot.mx/

JMiur  

Agregando uan regla de estilo específico para esos enlaces internos; por ejemplo:

#demoA div a {
background: none;
box-shadow: none;
color: red;
}
#demoA div a:hover {
color: black;
}

Luis Reyes  

JMiur muchas gracias se ve sensacional, master del blogger!!

Responder
zafiro  

Excelente soy tu Fan :D

Responder
zafiro  

Excelente :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR