bloques

Bloques tipo acordeon con jquery y css

Nota: Este tutorial requiere conocimientos básicos de CSS y jQuery. Para obtener los mejores resultados, por favor, asegúrese de aprender las bases adecuadas antes de intentar realizar este tutorial. Aprenda paso a paso :-) tiempo

Cuando se diseñó e implementó con la usabilidad en mente, el acordeón puede ser increíblemente útil en la organización de una buena parte de los contenidos. Dado que una gran cantidad de personas que se encuentran mis alternar tutorial útil, me gustaría ir más de cómo me acerqué a la construcción de un acordeón a partir de cero.

vista previa

<h2 class="acc_trigger"><a href="#" _fcksavedurl="#">Web Design & Development</a></h2> <div class="acc_container"> <div class="block"> <!--Content Goes Here--> </div> </div>

Estilo - CSS

Hay dos partes importantes de prestar especial atención en los estilos.

1. de ancho fijo en el acc_container. (No se puede en% o em). Esto evita que un error de jQuery inusual en el que salta / salta cuando el acordeón se desliza hacia abajo (a la derecha al llegar a la parte inferior). He investigado esto y algunos sugirieron que especifica una altura con jQuery, pero he encontrado mi solución es mucho más simple y eficaz.

2. Añadir el relleno al div anidado en el. Acc_container. Esto impide que otro error en el que se anima el relleno cuando el acordeón es en la apertura / cierre.

>h2.acc_trigger { padding: 0; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 500px; font-size: 2em; font-weight: normal; float: left; } h2.acc_trigger a { color: #fff; text-decoration: none; display: block; padding: 0 0 0 50px; } h2.acc_trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} .acc_container { margin: 0 0 5px; padding: 0; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; background: #f0f0f0; border: 1px solid #d6d6d6; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .acc_container .block { padding: 20px; } <!--Content Goes Here--> </div> </div>

Paso 3. Configuración de jQuery

Para aquellos que no están familiarizados con jQuery, lo echa un vistazo a su primer sitio y obtener una visión general de cómo funciona. He compartido algunos trucos que he recogido a lo largo del camino, usted puede comprobar ésos hacia fuera también.

Paso inicial - Llame al archivo de jQuery

Usted puede optar por descargar el archivo desde el sitio de jQuery, o puede utilizar esta alojado en Google.

 

 
La lógica - ¿Qué está pasando aquí?

1. En primer lugar establecer la configuración por defecto: Abierto el primer acordeón y añadir estado activo.

2. Al hacer clic: Averigüe si el artículo acordeón clic se abre o se cierra.

3. Si el artículo se hace clic en "oculto" (cerrado), entonces ...

4. En todos los artículos de acordeón - Eliminar todas las "activas" las clases y se deslizan hacia arriba (cerca de) todos los acc_container inmediato siguiente..

5. El hacer clic en activar $ (este) - Añadir "activo" y deslizarse por la acc_container inmediato siguiente..



Nota: El siguiente codigo no viene en el post original en ingles, lo agrego para que se den una idea de como quedaría el codigo implementado.

 
Totalmente probado el codigo de hecho el anterior codigo que coloque a su disposicion fué el que previamente realizé en mi ordenador. Espero les sirva este tutorial traducido al español el post original es de soh tanaka.

Enlace: www.forotokarg.com

Compartir este tutorial: