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
$ (seletor, contexto) .accordion ("ação", parâmetros) Método

$ (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 -


$( ".selector" ).accordion(
   { active: 2 }
);
$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
$( ".selector" ).accordion(
   { collapsible: true }
);
$( ".selector" ).accordion(
   { disabled: true }
);
$( ".selector" ).accordion(
   { event: "mouseover" }
);
$( ".selector" ).accordion(
   { header: "h3" }
);
$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

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>

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>

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 -


$(".selector").accordion("destroy");
$(".selector").accordion("disable");
$(".selector").accordion("enable");
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
var options = $( ".selector" ).accordion( "option" );
$( ".selector" ).accordion( "option", "disabled", true );
$( ".selector" ).accordion( "option", { disabled: true } );
$(".selector").accordion("refresh");
var widget = $( ".selector" ).accordion( "widget" );

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.