JqueryUI - Acordeão

Accordion Widget em jQueryUI é um suporte de conteúdo expansível e recolhível baseado em jQuery que é dividido em seções e provavelmente se parece com guias. jQueryUI fornece o método Accordion () para fazer isso.

Sintaxe

o accordion() método pode ser usado em duas formas -

$ (seletor, contexto) .accordion (opções) Método

O método sanfona (opções) declara que um elemento HTML e seu conteúdo devem ser tratados e gerenciados como menus sanfona. O parâmetro options é um objeto que especifica a aparência e o comportamento do menu envolvido.

Sintaxe

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

Você pode fornecer uma ou mais opções por vez usando o objeto Javascript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -

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

A tabela a seguir lista as diferentes opções que podem ser usadas com este método -

Sr. Não. Opção e descrição
1 ativo

Indica o índice do menu que é aberto quando a página é acessada pela primeira vez. Por padrão, seu valor é0, ou seja, o primeiro menu.

Option - active

Indica o índice do menu que é aberto quando a página é acessada pela primeira vez. Por padrão, seu valor é0, ou seja, o primeiro menu.

Isso pode ser do tipo -

  • Boolean- Se definido como falso , todos os painéis serão recolhidos. Isso requer que a opção recolhível seja verdadeira .

  • Integer- O índice baseado em zero do painel que está ativo (aberto). Um valor negativo seleciona os painéis retrocedendo do último painel.

Syntax

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

Esta opção é usada para definir como animar os painéis variáveis. Por padrão, seu valor é{}.

Option - animate

Esta opção é usada para definir como animar os painéis variáveis. Por padrão, seu valor é{}.

Isso pode ser do tipo -

  • Boolean- Um valor false desativará as animações.

  • Number - Esta é uma duração em milissegundos

  • String - Nome do easing a ser usado com duração padrão.

  • Object - Configurações de animação com propriedades de atenuação e duração.

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
3 dobrável

Esta opção, quando definida como verdadeira , permite que os usuários fechem um menu clicando nele. Por padrão, os cliques no cabeçalho do painel aberto não têm efeito. Por padrão, seu valor éfalse.

Option - collapsible

Esta opção, quando definida como verdadeira , permite que os usuários fechem um menu clicando nele. Por padrão, os cliques no cabeçalho do painel aberto não têm efeito. Por padrão, seu valor éfalse.

Syntax

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

Esta opção, quando definida como verdadeira, desativa o acordeão. Por padrão, seu valor éfalse.

Option - disabled

Esta opção, quando definida como verdadeira, desativa o acordeão. Por padrão, seu valor éfalse.

Syntax

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

Esta opção especifica o evento usado para selecionar um cabeçalho de acordeão. Por padrão, seu valor éclick.

Option - event

Esta opção especifica o evento usado para selecionar um cabeçalho de acordeão. Por padrão, seu valor éclick.

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 cabeçalho

Esta opção especifica um seletor ou elemento para substituir o padrão padrão para identificar os elementos do cabeçalho. Por padrão, seu valor é> li > :first-child,> :not(li):even.

Option - header

Esta opção especifica um seletor ou elemento para substituir o padrão padrão para identificar os elementos do cabeçalho. Por padrão, seu valor é> li > :first-child,> :not(li):even.

Syntax

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

Esta opção é usada para controlar a altura do acordeão e dos painéis. Por padrão, seu valor éauto.

Option - heightStyle

Esta opção é usada para controlar a altura do acordeão e dos painéis. Por padrão, seu valor éauto.

Os valores possíveis são -

  • auto - Todos os painéis serão definidos para a altura do painel mais alto.

  • fill - Expanda para a altura disponível com base na altura pai do acordeão.

  • content - Cada painel terá a altura de seu conteúdo.

Syntax

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

Esta opção é um objeto que define os ícones a serem usados ​​à esquerda do texto do cabeçalho para painéis abertos e fechados. O ícone a ser usado para painéis fechados é especificado como uma propriedade chamada header , enquanto o ícone a ser usado para painéis abertos é especificado como uma propriedade chamada headerSelected . Por padrão, seu valor é{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Option - icons

Esta opção é um objeto que define os ícones a serem usados ​​à esquerda do texto do cabeçalho para painéis abertos e fechados. O ícone a ser usado para painéis fechados é especificado como uma propriedade chamada header , enquanto o ícone a ser usado para painéis abertos é especificado como uma propriedade chamada headerSelected . Por padrão, seu valor é{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Syntax

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

A seção a seguir mostrará alguns exemplos funcionais da funcionalidade do widget sanfona.

Funcionalidade padrão

O exemplo a seguir demonstra um exemplo simples de funcionalidade de widget de acordeão, sem passar parâmetros para o 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>

Vamos salvar o código acima em um arquivo HTML accordionexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Clique nos cabeçalhos (Guia 1, Guia 2, Guia 3) para expandir / recolher o conteúdo dividido em seções lógicas, como as guias.

Uso de recolhível

O exemplo a seguir demonstra o uso de três opções collapsible no widget de acordeão do 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>

Vamos salvar o código acima em um arquivo HTML accordionexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Aqui, definimos recolhível para verdadeiro . Clique em um cabeçalho de acordeão para recolher a seção ativa.

Uso de heightStyle

O exemplo a seguir demonstra o uso de três opções heightStyle no widget de acordeão do 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>

Vamos salvar o código acima em um arquivo HTML accordionexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -

Aqui temos dois acordeões, o primeiro tem a opção heightStyle definida como conteúdo , o que permite que os painéis do acordeão mantenham sua altura nativa. O segundo acordeão tem a opção heightStyle definida para preencher , o script definirá automaticamente as dimensões do acordeão para a altura de seu contêiner pai.

$ (seletor, contexto) .accordion ("ação", parâmetros) Método

O método de acordeão ("ação", parâmetros) pode executar uma ação em elementos de acordeão, como selecionar / desmarcar o menu de acordeão. A ação é especificada como uma string no primeiro argumento (por exemplo, "desativar" desativa todos os menus). Confira as ações que podem ser aprovadas, na tabela a seguir.

Sintaxe

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

A tabela a seguir lista as diferentes ações que podem ser usadas com este método -

Sr. Não. Ação e Descrição
1 destruir

Essa ação destrói completamente a funcionalidade de acordeão de um elemento. Os elementos retornam ao seu estado pré-inicial.

Action - destroy

Essa ação destrói completamente a funcionalidade de acordeão de um elemento. Os elementos retornam ao seu estado pré-inicial.

Syntax

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

Esta ação desativa todos os menus. Nenhum clique será levado em consideração. Este método não aceita nenhum argumento.

Action - disable

Esta ação desativa todos os menus. Nenhum clique será levado em consideração. Este método não aceita nenhum argumento.

Syntax

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

Esta ação reativa todos os menus. Os cliques são novamente considerados. Este método não aceita nenhum argumento.

Action - enable

Esta ação reativa todos os menus. Os cliques são novamente considerados. Este método não aceita nenhum argumento.

Syntax

$(".selector").accordion("enable");
4 opção (optionName)

Esta ação obtém o valor do elemento sanfona atualmente associado com o optionName especificado . Isso leva um valor String como argumento.

Action - option( optionName )

Esta ação obtém o valor do elemento sanfona atualmente associado com o optionName especificado . Isso leva um valor String como argumento.

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 opção

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções de acordeão atual.

Action - option

Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções de acordeão atual.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 opção (optionName, value)

Esta ação define o valor da opção de acordeão associada ao optionName especificado.

Action - option( optionName, value )

Esta ação define o valor da opção de acordeão associada ao optionName especificado.

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7 opção (opções)

Esta ação define uma ou mais opções para o acordeão.

Action - option( options )

Esta ação define uma ou mais opções para o acordeão. Onde options é um mapa de pares de opção-valor a definir.

Syntax

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

Esta ação processa quaisquer cabeçalhos e painéis que foram adicionados ou removidos diretamente no DOM. Em seguida, ele recalcula a altura dos painéis do acordeão. Os resultados dependem do conteúdo e da opção heightStyle. Este método não aceita nenhum argumento.

Action - refresh

Esta ação processa quaisquer cabeçalhos e painéis que foram adicionados ou removidos diretamente no DOM. Em seguida, ele recalcula a altura dos painéis do acordeão. Os resultados dependem do conteúdo e da opção heightStyle. Este método não aceita nenhum argumento.

Syntax

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

Esta ação retorna o elemento do widget acordeão; aquele anotado com o nome da classe ui-acordeão .

Action - widget

Esta ação retorna o elemento do widget acordeão; aquele anotado com o nome da classe ui-acordeão .

Syntax

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

Exemplo

Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso do 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>

Vamos salvar o código acima em um arquivo HTML accordionexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Aqui, demonstramos a ativação e desativação dos acordeões. Selecione os respectivos botões de opção para verificar cada ação.

Gerenciamento de eventos em elementos de acordeão

Além do método de acordeão (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -

Sr. Não. Método e descrição do evento
1 ativar (evento, ui)

Este evento é acionado quando um menu é ativado. Este evento é disparado apenas na ativação do painel, ele não é disparado para o painel inicial quando o widget sanfona é criado.

Event - activate(event, ui)

Este evento é acionado quando um menu é ativado. Este evento é disparado apenas na ativação do painel, ele não é disparado para o painel inicial quando o widget sanfona é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • newHeader - Um objeto jQuery que representa o cabeçalho que acabou de ser ativado.

  • oldHeader - Um objeto jQuery que representa o cabeçalho que acabou de ser desativado.

  • newPanel - Um objeto jQuery que representa o painel que acabou de ser ativado.

  • oldPanel - Um objeto jQuery que representa o painel que acabou de ser desativado.

Syntax

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

Este evento é acionado antes que um painel seja ativado. Este evento pode ser cancelado para evitar a ativação do painel.

Event - beforeActivate(event, ui)

Este evento é acionado antes que um painel seja ativado. Este evento pode ser cancelado para evitar que o painel seja ativado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • newHeader - Um objeto jQuery que representa o cabeçalho que está prestes a ser ativado.

  • oldHeader - Um objeto jQuery que representa o cabeçalho que está prestes a ser desativado.

  • newPanel - Um objeto jQuery que representa o painel que está para ser ativado.

  • oldPanel - Um objeto jQuery que representa o painel que está para ser desativado.

Syntax

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

Este evento é acionado quando o acordeão é criado.

Event - create(event, ui)

Este evento é acionado quando o acordeão é criado. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -

  • header - Um objeto jQuery que representa o cabeçalho ativo.

  • panel - Um objeto jQuery que representa o painel ativo.

Syntax

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

Exemplo

O exemplo a seguir demonstra o uso do método de evento em widgets de acordeão. Este exemplo demonstra o uso dos eventos create , beforeActive e 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>

Vamos salvar o código acima em um arquivo HTML accordionexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -

Aqui estamos exibindo um texto na parte inferior, com base nos eventos.