Índice

El acordeón

1. El uso del componente

El componente Accordion, acordeón en español, permite mostrar muchas informaciones (textos, imágenes, etc.) en poco espacio. Toda la información se muestra en paneles que se podrá mostrar u ocultar simplemente haciendo clic en el título de cada panel.

2. Insertar el componente

Sitúe el punto de inserción allí donde desee insertar el componente.

En el menú Insertar, o en el panel Insertar, seleccione jQuery UI y Accordion.

images/20OWT-01.PNG

El componente se inserta en la página:

images/20OWT-02.PNG

Seleccione el componente en la página haciendo clic en la pestaña azul jQuery Accordion: Accordion1.

En el panel Propiedades, campo ID de div, puede ver que el componente se llama Accordion1. Este es el identificativo utilizado en el código HTML/CSS y JavaScript, por tanto, evite modificarlos excepto si sabe dónde habrá que cambiar el nombre.

images/20OWT-03.PNG

3. Modificar el título y añadir contenido a los paneles

Dreamweaver coloca tres paneles en el acordeón por defecto. Sus nombres son Sección 1, Sección 2 y Sección 3.

Seleccione el primer título Sección 1 y escriba en su lugar el texto deseado. Características en este ejemplo.

images/20OWT-04.png

Para añadir contenido al primer panel, seleccione el texto Contenido 1 e introduzca su texto. Es posible añadir imágenes, enlaces, tablas, etc.

images/20OWT-05.png

Modifique el título Sección 2 y el Contenido 2 como hemos hecho anteriormente. ...