Algunas de las más poderosas herramientas de jQuery son en realidad los más fáciles de usar en la programación HTML5 y CSS3. El widget de acordeón ha convertido en una parte muy popular del conjunto de herramientas jQuery UI.

Aquí, se ve partidas de libros. Los detalles para el primero de ellos están disponibles, pero los detalles de los otros libros están ocultos.

Este efecto maravilloso permite al usuario centrarse en una determinada parte de un contexto más amplio, mientras que ver el esquema general. Se llama acordeón debido a que las diferentes piezas se expanden y contraen para permitir que el usuario se concentre en una parte sin perder el lugar de su posición. contenido plegable se ha convertido en una importante herramienta de usabilidad hecho popular por la barra del sistema en Mac OS y otras herramientas de usabilidad populares.

El efecto acordeón es sorprendentemente fácil de lograr con jQuery:

demostración de acordeón
Libro I - Creación de la Fundación HTML
Fundamentos de sonido HTML
Sólo se trata de Validación
La elección de sus herramientas
Gestión de la información con Listas y Tablas
Cómo realizar las conexiones con los enlaces
Adición de Imágenes
Creación de formularios
Libro II - Styling con CSS
Colorear su mundo
estilo de texto
Selectores, Clase y Estilo
Bordes y fondos
Los niveles de CSS
Libro III - El uso de CSS posicional de diseño
Diversión con el flotador fabuloso
Edificio flotante diseños de página
Estilos de listas y menús
El uso de posicionamiento alternativo

Como se puede ver mirando por encima del código, es principalmente sólo HTML. El efecto es muy fácil de lograr:

1. Importar todos los sospechosos habituales.

   Video: 07 - tutorial formularios html5 y css3 | input type file y como personalizarlo

   Es necesario para importar los archivos de javascript jQuery jQuery UI y, y un archivo de tema de CSS. También es necesario asegurarse de que el CSS tiene acceso a la imágenes directorio con iconos y fondos porque va a utilizar algunas de estas imágenes de forma automática.

2. Construir su página HTML de forma normal.

   Construir una página HTML como lo haría normalmente. Prestar atención a las secciones que desee a colapsar. Normalmente debe haber una etiqueta de dirección a cada elemento, todo al mismo nivel.

3. Crear un div que contiene todo el contenido plegable.

   Video: Aprende a implementar un calendario con jQuery en un formulario

   Poner todo el contenido plegable en una sola div con un ID. Se le convirtiendo este div en un elemento jQuery acordeón.

4. Añadir un ancla alrededor de cada título que desea especificar como plegable.

   Colocar una etiqueta de ancla vacía () Alrededor de cada título que desea utilizar como título plegable. El signo indica que el ancla se llame a la misma página y se utiliza como un marcador de posición por el motor de jQuery UI. Puede añadir el ancla directamente en el HTML o mediante código de jQuery.

5. Crear un jQuery en eso()función.

   Utilizar las técnicas normales para construir un inicializador jQuery.

6. Aplica el acordeón() método para la div.

   Video: Desarrollo web con HTML 5, CSS 3, AJAX, JQUERY y PHP 5

   Usar jQuery para identificar el div que contiene el contenido plegable y aplicar acordeón() lo:

    función init () {$ ("#acordeón").acordeón()-}