JqueryUI - Accordéon

Accordion Widget dans jQueryUI est un support de contenu extensible et pliable basé sur jQuery qui est divisé en sections et ressemble probablement à des onglets. jQueryUI fournit la méthode accordéon () pour y parvenir.

Syntaxe

le accordion() La méthode peut être utilisée sous deux formes -

$ (selector, context) .accordion (options), méthode

La méthode accordéon (options) déclare qu'un élément HTML et son contenu doivent être traités et gérés comme des menus accordéon. Le paramètre options est un objet qui spécifie l'apparence et le comportement du menu concerné.

Syntaxe

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

Vous pouvez fournir une ou plusieurs options à la fois en utilisant un objet Javascript. S'il y a plus d'une option à fournir, vous les séparerez en utilisant une virgule comme suit -

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

Le tableau suivant répertorie les différentes options pouvant être utilisées avec cette méthode -

Sr.No. Option et description
1 actif

Indique l'index du menu qui est ouvert lors du premier accès à la page. Par défaut, sa valeur est0, c'est à dire le premier menu.

Option - active

Indique l'index du menu qui est ouvert lors du premier accès à la page. Par défaut, sa valeur est0, c'est à dire le premier menu.

Cela peut être de type -

  • Boolean- Si défini sur false , tous les panneaux seront réduits. Cela nécessite que l'option réductible soit vraie .

  • Integer- L'index de base zéro du panneau actif (ouvert). Une valeur négative sélectionne les panneaux en arrière depuis le dernier panneau.

Syntax

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

Cette option est utilisée pour définir comment animer les panneaux changeants. Par défaut, sa valeur est{}.

Option - animate

Cette option est utilisée pour définir comment animer les panneaux changeants. Par défaut, sa valeur est{}.

Cela peut être de type -

  • Boolean- Une valeur de false désactivera les animations.

  • Number - C'est une durée en millisecondes

  • String - Nom de l'assouplissement à utiliser avec la durée par défaut.

  • Object - Paramètres d'animation avec des propriétés d'accélération et de durée.

Syntax

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

Cette option, lorsqu'elle est définie sur true , permet aux utilisateurs de fermer un menu en cliquant dessus. Par défaut, les clics sur l'en-tête du panneau ouvert n'ont aucun effet. Par défaut, sa valeur estfalse.

Option - collapsible

Cette option, lorsqu'elle est définie sur true , permet aux utilisateurs de fermer un menu en cliquant dessus. Par défaut, les clics sur l'en-tête du panneau ouvert n'ont aucun effet. Par défaut, sa valeur estfalse.

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 désactivée

Cette option, lorsqu'elle est définie sur true, désactive l'accordéon. Par défaut, sa valeur estfalse.

Option - disabled

Cette option, lorsqu'elle est définie sur true, désactive l'accordéon. Par défaut, sa valeur estfalse.

Syntax

$( ".selector" ).accordion(
   { disabled: true }
);
5 un événement

Cette option spécifie l'événement utilisé pour sélectionner un en-tête d'accordéon. Par défaut, sa valeur estclick.

Option - event

Cette option spécifie l'événement utilisé pour sélectionner un en-tête d'accordéon. Par défaut, sa valeur estclick.

Syntax

$( ".selector" ).accordion(
   { event: "mouseover" }
);
6 entête

Cette option spécifie un sélecteur ou un élément pour remplacer le modèle par défaut pour identifier les éléments d'en-tête. Par défaut, sa valeur est> li > :first-child,> :not(li):even.

Option - header

Cette option spécifie un sélecteur ou un élément pour remplacer le modèle par défaut pour identifier les éléments d'en-tête. Par défaut, sa valeur est> li > :first-child,> :not(li):even.

Syntax

$( ".selector" ).accordion(
   { header: "h3" }
);
sept hauteurStyle

Cette option est utilisée pour contrôler la hauteur de l'accordéon et des panneaux. Par défaut, sa valeur estauto.

Option - heightStyle

Cette option est utilisée pour contrôler la hauteur de l'accordéon et des panneaux. Par défaut, sa valeur estauto.

Les valeurs possibles sont -

  • auto - Tous les panneaux seront réglés à la hauteur du panneau le plus haut.

  • fill - Développez la hauteur disponible en fonction de la hauteur du parent de l'accordéon.

  • content - Chaque panneau sera seulement aussi grand que son contenu.

Syntax

$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
8 Icônes

Cette option est un objet qui définit les icônes à utiliser à gauche du texte d'en-tête pour les panneaux ouverts et fermés. L'icône à utiliser pour les panneaux fermés est spécifiée en tant que propriété nommée header , tandis que l'icône à utiliser pour les panneaux ouverts est spécifiée en tant que propriété nommée headerSelected . Par défaut, sa valeur est{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Option - icons

Cette option est un objet qui définit les icônes à utiliser à gauche du texte d'en-tête pour les panneaux ouverts et fermés. L'icône à utiliser pour les panneaux fermés est spécifiée en tant que propriété nommée header , tandis que l'icône à utiliser pour les panneaux ouverts est spécifiée en tant que propriété nommée headerSelected . Par défaut, sa valeur est{ "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 section suivante vous montrera quelques exemples fonctionnels de fonctionnalité de widget accordéon.

Fonctionnalité par défaut

L'exemple suivant montre un exemple simple de fonctionnalité de widget accordéon, en ne passant aucun paramètre au accordion() méthode.

<!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>

Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Cliquez sur les en-têtes (onglet 1, onglet 2, onglet 3) pour développer / réduire le contenu qui est divisé en sections logiques, un peu comme des onglets.

Utilisation de pliable

L'exemple suivant illustre l'utilisation de trois options collapsible dans le widget accordéon 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>

Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Ici, nous avons défini pliable sur true . Cliquez sur un en-tête d'accordéon, cela permet de réduire la section active.

Utilisation de heightStyle

L'exemple suivant illustre l'utilisation de trois options heightStyle dans le widget accordéon 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>

Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Ici, nous avons deux accordéons, le premier a l' option heightStyle définie sur content , ce qui permet aux panneaux d'accordéon de conserver leur hauteur native. Le deuxième accordéon a l' option heightStyle définie sur fill , le script définira automatiquement les dimensions de l'accordéon à la hauteur de son conteneur parent.

$ (selector, context) .accordion ("action", params) Méthode

La méthode accordéon ("action", params) peut effectuer une action sur des éléments d'accordéon, comme sélectionner / désélectionner le menu accordéon. L'action est spécifiée sous forme de chaîne dans le premier argument (par exemple, "désactiver" désactive tous les menus). Découvrez les actions qui peuvent être passées, dans le tableau suivant.

Syntaxe

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

Le tableau suivant répertorie les différentes actions pouvant être utilisées avec cette méthode -

Sr.No. Action et description
1 détruire

Cette action détruit complètement la fonctionnalité d'accordéon d'un élément. Les éléments reviennent à leur état pré-init.

Action - destroy

Cette action détruit complètement la fonctionnalité d'accordéon d'un élément. Les éléments reviennent à leur état pré-init.

Syntax

$(".selector").accordion("destroy");
2 désactiver

Cette action désactive tous les menus. Aucun clic ne sera pris en compte. Cette méthode n'accepte aucun argument.

Action - disable

Cette action désactive tous les menus. Aucun clic ne sera pris en compte. Cette méthode n'accepte aucun argument.

Syntax

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

Cette action réactive tous les menus. Les clics sont à nouveau considérés. Cette méthode n'accepte aucun argument.

Action - enable

Cette action réactive tous les menus. Les clics sont à nouveau considérés. Cette méthode n'accepte aucun argument.

Syntax

$(".selector").accordion("enable");
4 option (optionName)

Cette action obtient la valeur de l'élément d'accordéon actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument.

Action - option( optionName )

Cette action obtient la valeur de l'élément d'accordéon actuellement associé avec le nom d' option spécifié . Cela prend une valeur String comme argument.

Syntax

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

Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options d'accordéon actuel.

Action - option

Cette action obtient un objet contenant des paires clé / valeur représentant le hachage d'options d'accordéon actuel.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 option (optionName, valeur)

Cette action définit la valeur de l'option d'accordéon associée au nom d'option spécifié.

Action - option( optionName, value )

Cette action définit la valeur de l'option d'accordéon associée au nom d'option spécifié.

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
sept option (options)

Cette action définit une ou plusieurs options pour l'accordéon.

Action - option( options )

Cette action définit une ou plusieurs options pour l'accordéon. Où options est une carte de paires option-valeur à définir.

Syntax

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

Cette action traite tous les en-têtes et panneaux qui ont été ajoutés ou supprimés directement dans le DOM. Il recalcule ensuite la hauteur des panneaux d'accordéon. Les résultats dépendent du contenu et de l'option heightStyle. Cette méthode n'accepte aucun argument.

Action - refresh

Cette action traite tous les en-têtes et panneaux qui ont été ajoutés ou supprimés directement dans le DOM. Il recalcule ensuite la hauteur des panneaux d'accordéon. Les résultats dépendent du contenu et de l'option heightStyle. Cette méthode n'accepte aucun argument.

Syntax

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

Cette action renvoie l'élément de widget accordéon; celui annoté avec le nom de la classe ui-accordéon .

Action - widget

Cette action renvoie l'élément de widget accordéon; celui annoté avec le nom de la classe ui-accordéon .

Syntax

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

Exemple

Voyons maintenant un exemple utilisant les actions du tableau ci-dessus. L'exemple suivant illustre l'utilisation de la méthode 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>

Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Ici, nous démontrons l'activation et la désactivation des accordéons. Sélectionnez les boutons radio respectifs pour vérifier chaque action.

Gestion d'événements sur les éléments d'accordéon

En plus de la méthode accordéon (options) que nous avons vue dans les sections précédentes, JqueryUI fournit des méthodes d'événement qui se déclenchent pour un événement particulier. Ces méthodes d'événement sont répertoriées ci-dessous -

Sr.No. Méthode d'événement et description
1 activer (événement, ui)

Cet événement est déclenché lorsqu'un menu est activé. Cet événement n'est déclenché que lors de l'activation du panneau, il n'est pas déclenché pour le panneau initial lorsque le widget accordéon est créé.

Event - activate(event, ui)

Cet événement est déclenché lorsqu'un menu est activé. Cet événement n'est déclenché que lors de l'activation du panneau, il n'est pas déclenché pour le panneau initial lorsque le widget accordéon est créé. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • newHeader - Un objet jQuery représentant l'en-tête qui vient d'être activé.

  • oldHeader - Un objet jQuery représentant l'en-tête qui vient d'être désactivé.

  • newPanel - Un objet jQuery représentant le panneau qui vient d'être activé.

  • oldPanel - Un objet jQuery représentant le panneau qui vient d'être désactivé.

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate (événement, interface utilisateur)

Cet événement est déclenché avant l'activation d'un panneau. Cet événement peut être annulé pour empêcher le panneau de s'activer.

Event - beforeActivate(event, ui)

Cet événement est déclenché avant l'activation d'un panneau. Cet événement peut être annulé pour empêcher le panneau de s'activer. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • newHeader - Un objet jQuery représentant l'en-tête sur le point d'être activé.

  • oldHeader - Un objet jQuery représentant l'en-tête qui est sur le point d'être désactivé.

  • newPanel - Un objet jQuery représentant le panneau sur le point d'être activé.

  • oldPanel - Un objet jQuery représentant le panneau sur le point d'être désactivé.

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
3 create (événement, interface utilisateur)

Cet événement est déclenché lors de la création de l'accordéon.

Event - create(event, ui)

Cet événement est déclenché lors de la création de l'accordéon. Où event est de type Event et ui est de type Object . Les valeurs possibles de ui sont -

  • header - Un objet jQuery représentant l'en-tête actif.

  • panel - Un objet jQuery représentant le panneau actif.

Syntax

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

Exemple

L'exemple suivant illustre l'utilisation de la méthode événementielle dans les widgets d'accordéon. Cet exemple illustre l'utilisation des événements create , beforeActive et 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>

Sauvegardons le code ci-dessus dans un fichier HTML accordionexample.htm et ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante -

Ici, nous affichons un texte en bas, basé sur les événements.