JqueryUI - Acordeón

Accordion Widget en jQueryUI es un contenedor de contenido expandible y plegable basado en jQuery que está dividido en secciones y probablemente se ve como pestañas. jQueryUI proporciona el método accordion () para lograr esto.

Sintaxis

los accordion() El método se puede utilizar de dos formas:

$ (selector, contexto) .accordion (opciones) Método

El método accordion (options) declara que un elemento HTML y su contenido deben tratarse y administrarse como menús de acordeón. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento del menú involucrado.

Sintaxis

$(selector, context).accordion (options);

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).accordion({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 activo

Indica el índice del menú que está abierto cuando se accede a la página por primera vez. Por defecto su valor es0, es decir, el primer menú.

Option - active

Indica el índice del menú que está abierto cuando se accede a la página por primera vez. Por defecto su valor es0, es decir, el primer menú.

Esto puede ser de tipo:

  • Boolean- Si se establece en falso , todos los paneles colapsarán. Esto requiere que la opción plegable sea cierta .

  • Integer- El índice de base cero del panel que está activo (abierto). Un valor negativo selecciona paneles que retroceden desde el último panel.

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 animar

Esta opción se utiliza para configurar cómo animar los paneles cambiantes. Por defecto su valor es{}.

Option - animate

Esta opción se utiliza para configurar cómo animar los paneles cambiantes. Por defecto su valor es{}.

Esto puede ser de tipo:

  • Boolean- Un valor de falso deshabilitará las animaciones.

  • Number - Esta es una duración en milisegundos

  • String - Nombre de la aceleración para usar con duración predeterminada.

  • Object - Configuración de animación con propiedades de suavizado y duración.

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 plegable

Esta opción cuando se establece en verdadera , permite a los usuarios cerrar un menú haciendo clic en él. De forma predeterminada, los clics en el encabezado del panel abierto no tienen ningún efecto. Por defecto su valor esfalse.

Option - collapsible

Esta opción cuando se establece en verdadera , permite a los usuarios cerrar un menú haciendo clic en él. De forma predeterminada, los clics en el encabezado del panel abierto no tienen ningún efecto. Por defecto su valor esfalse.

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 discapacitado

Esta opción cuando se establece en verdadero desactiva el acordeón. Por defecto su valor esfalse.

Option - disabled

Esta opción cuando se establece en verdadero desactiva el acordeón. Por defecto su valor esfalse.

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 evento

Esta opción especifica el evento utilizado para seleccionar un encabezado de acordeón. Por defecto su valor esclick.

Option - event

Esta opción especifica el evento utilizado para seleccionar un encabezado de acordeón. Por defecto su valor esclick.

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 encabezamiento

Esta opción especifica un selector o elemento para anular el patrón predeterminado para identificar los elementos del encabezado. Por defecto su valor es> li > :first-child,> :not(li):even.

Option - header

Esta opción especifica un selector o elemento para anular el patrón predeterminado para identificar los elementos del encabezado. Por defecto su valor es> li > :first-child,> :not(li):even.

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
7 heightStyle

Esta opción se utiliza para controlar la altura del acordeón y los paneles. Por defecto su valor esauto.

Option - heightStyle

Esta opción se utiliza para controlar la altura del acordeón y los paneles. Por defecto su valor esauto.

Los valores posibles son:

  • auto - Todos los paneles se colocarán a la altura del panel más alto.

  • fill - Expanda a la altura disponible según la altura principal del acordeón.

  • content - Cada panel será tan alto como su contenido.

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 iconos

Esta opción es un objeto que define los iconos que se utilizarán a la izquierda del texto del encabezado para paneles abiertos y cerrados. El icono que se utilizará para los paneles cerrados se especifica como una propiedad denominada encabezado , mientras que el icono que se utilizará para los paneles abiertos se especifica como una propiedad denominada headerSelected . Por defecto su valor es{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Option - icons

Esta opción es un objeto que define los iconos que se utilizarán a la izquierda del texto del encabezado para paneles abiertos y cerrados. El icono que se utilizará para los paneles cerrados se especifica como una propiedad denominada encabezado , mientras que el icono que se utilizará para los paneles abiertos se especifica como una propiedad denominada headerSelected . Por defecto su valor es{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Syntax

$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad del widget de acordeón.

Funcionalidad predeterminada

El siguiente ejemplo demuestra un ejemplo simple de la funcionalidad del widget de acordeón, sin pasar parámetros al accordion() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Haga clic en los encabezados (pestaña 1, pestaña 2, pestaña 3) para expandir / contraer el contenido dividido en secciones lógicas, como pestañas.

Uso de plegable

El siguiente ejemplo demuestra el uso de tres opciones collapsible en el widget de acordeón de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Aquí hemos establecido collapsible en true . Haga clic en un encabezado en acordeón, esto permite contraer la sección activa.

Uso de heightStyle

El siguiente ejemplo demuestra el uso de tres opciones heightStyle en el widget de acordeón de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Aquí tenemos dos acordeones, el primero tiene la opción heightStyle configurada como contenido , lo que permite que los paneles de acordeón mantengan su altura nativa. El segundo acordeón tiene la opción heightStyle configurada para llenar , el script establecerá automáticamente las dimensiones del acordeón a la altura de su contenedor principal.

$ (selector, contexto) .accordion ("action", params) Método

El método de acordeón ("acción", parámetros) puede realizar una acción sobre los elementos del acordeón, como seleccionar / deseleccionar el menú del acordeón. La acción se especifica como una cadena en el primer argumento (por ejemplo, "desactivar" desactiva todos los menús). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).accordion ("action", params);;

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 destruir

Esta acción destruye completamente la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio.

Action - destroy

Esta acción destruye completamente la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio.

Syntax

$(".selector").accordion("destroy");
2 inhabilitar

Esta acción desactiva todos los menús. No se tendrá en cuenta ningún clic. Este método no acepta argumentos.

Action - disable

Esta acción desactiva todos los menús. No se tendrá en cuenta ningún clic. Este método no acepta argumentos.

Syntax

$(".selector").accordion("disable");
3 habilitar

Esta acción reactiva todos los menús. Los clics se vuelven a considerar. Este método no acepta argumentos.

Action - enable

Esta acción reactiva todos los menús. Los clics se vuelven a considerar. Este método no acepta argumentos.

Syntax

$(".selector").accordion("enable");
4 opción (optionName)

Esta acción obtiene el valor del elemento acordeón actualmente asociado con el optionName especificado . Esto toma un valor de cadena como argumento.

Action - option( optionName )

Esta acción obtiene el valor del elemento acordeón actualmente asociado con el optionName especificado . Esto toma un valor de cadena como argumento.

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 opción

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de acordeón actual.

Action - option

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de acordeón actual.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 opción (optionName, valor)

Esta acción establece el valor de la opción de acordeón asociada con el optionName especificado.

Action - option( optionName, value )

Esta acción establece el valor de la opción de acordeón asociada con el optionName especificado.

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7 opción (opciones)

Esta acción establece una o más opciones para el acordeón.

Action - option( options )

Esta acción establece una o más opciones para el acordeón. Donde opciones es un mapa de pares opción-valor para establecer.

Syntax

$( ".selector" ).accordion( "option", { disabled: true } );
8 actualizar

Esta acción procesa los encabezados y paneles que se agregaron o eliminaron directamente en el DOM. Luego vuelve a calcular la altura de los paneles de acordeón. Los resultados dependen del contenido y de la opción heightStyle. Este método no acepta argumentos.

Action - refresh

Esta acción procesa los encabezados y paneles que se agregaron o eliminaron directamente en el DOM. Luego vuelve a calcular la altura de los paneles de acordeón. Los resultados dependen del contenido y de la opción heightStyle. Este método no acepta argumentos.

Syntax

$(".selector").accordion("refresh");
9 widget

Esta acción devuelve el elemento del widget de acordeón; el anotado con el nombre de la clase ui-accordion .

Action - widget

Esta acción devuelve el elemento del widget de acordeón; el anotado con el nombre de la clase ui-accordion .

Syntax

var widget = $( ".selector" ).accordion( "widget" );

Ejemplo

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método option (optionName, value) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

Guardemos el código anterior en un archivo HTML. accordionexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Aquí demostramos la activación y desactivación de los acordeones. Seleccione los respectivos botones de radio para comprobar cada acción.

Gestión de eventos sobre elementos de acordeón

Además del método de acordeón (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 activar (evento, ui)

Este evento se activa cuando se activa un menú. Este evento solo se dispara en la activación del panel, no se dispara para el panel inicial cuando se crea el widget de acordeón.

Event - activate(event, ui)

Este evento se activa cuando se activa un menú. Este evento solo se dispara en la activación del panel, no se dispara para el panel inicial cuando se crea el widget de acordeón. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • newHeader - Un objeto jQuery que representa el encabezado que se acaba de activar.

  • oldHeader - Un objeto jQuery que representa el encabezado que se acaba de desactivar.

  • newPanel - Un objeto jQuery que representa el panel que se acaba de activar.

  • oldPanel - Un objeto jQuery que representa el panel que se acaba de desactivar.

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate (evento, ui)

Este evento se activa antes de que se active un panel. Este evento se puede cancelar para evitar que el panel se active.

Event - beforeActivate(event, ui)

Este evento se activa antes de que se active un panel. Este evento se puede cancelar para evitar que el panel se active. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • newHeader - Un objeto jQuery que representa el encabezado que está a punto de activarse.

  • oldHeader - Un objeto jQuery que representa el encabezado que está a punto de desactivarse.

  • newPanel - Un objeto jQuery que representa el panel que está a punto de activarse.

  • oldPanel - Un objeto jQuery que representa el panel que está a punto de desactivarse.

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 crear (evento, ui)

Este evento se activa cuando se crea el acordeón.

Event - create(event, ui)

Este evento se activa cuando se crea el acordeón. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • header - Un objeto jQuery que representa el encabezado activo.

  • panel - Un objeto jQuery que representa el panel activo.

Syntax

$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

Ejemplo

El siguiente ejemplo demuestra el uso del método de eventos en los widgets de acordeón. Este ejemplo demuestra el uso de eventos create , beforeActive y active .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. accordionexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Aquí mostramos un texto en la parte inferior, basado en eventos.