El Ejemplo
Pasemos directamente al ejemplo, en este caso, tenemos una página ASP .Net sencilla con tres párrafos a los cuales vamos a transformar en paneles del control Accordion. Les muestro directamente la página y el HTML que la forma:
Como se podrán dar cuenta, la página esta formada únicamente por tres párrafos, los cuales, cada uno tiene un encabezado y la información de cada uno de los tres párrafos, en este ejemplo, los tengo organizados por medio de una serie de etiquetas <div>. Los pasos para trabajar con el Accordion son los siguientes:
1. Insertamos el control Accordion de manera que quede así:
2. Cada uno de los bloques que forman al Accordion se definen mediante otro control llamado el AccordionPane, cada AccordionPane tiene a su vez, dos etiquetas que definen su contenido, el “header” y el “content”, de tal manera que para este ejemplo, necesitaremos tres AccordionPane’s dentro del Accordion, de manera que quedará así:
3. El siguiente y último paso es acomodar cada uno de los párrafos que tenemos dentro de nuestra página web en las secciones que corresponde, en este caso, cada “Header” y cada “Content”, de manera que quede así:
4. Para terminar, si lo desean, pueden aplicar una hoja de estilo, entre las propiedades del Accordion, se encuentra la propiedad “HeaderCssClass” que define el estilo para cada encabezado de cada “AccordionPane” y la propiedad “ContentCssClass” que define el estilo para cada sección de contenido de los AccordionPane, en este caso, yo tengo una hoja de estilo de la siguiente forma:
Por lo que basta con utilizar las propiedades del Accordion: