Les accordéons

Pour comprendre ce qui suit, une (re)lecture des pages du chapitre jQuery du site peut être souhaitable :

Pour ajouter les accordéons qui figurent dans certaines page du site, j'ai suivi les étapes suivantes :

  1. Ajouter dans la page un bloc de contenu identifié "accordeons"
  2. Modifier le script js vu à la page "ajouter un script".
  3. Modifier le fichier libraries.yml du thême

1. le bloc accordeons

Attention : l'identifiant (au sens HTML-CSS du terme) "accordeons" que j'utilise peut être remplacé par un terme de votre choix. Si vous utilisez, un autre identifiant pensez à porter cette modification dans le code à ajouter au script.

Pour créer des accordéons, je dois créer un contenu HTML qui a la structure vue ici, donc de la forme

  •             <div id="accordeons">
                    <h3>Section 1</h3>
                        <div>
                            <!--contenu qui s affiche dans cet onglet -->
                            je m affiche dans la section 1
                        </div>
                    <h3>Section 2</h3>
                        <div>
                            <!--contenu qui s affiche dans cet onglet -->
                            je m affiche dans la section 2
                        </div>
                    <h3>Section 3</h3>
                        <div>
                            <!--contenu qui s affiche dans cette section -->
                            je m affiche dans la section 3
                        </div>
                </div> <!-- fin des onglets -->
information complémentaire disponible en cliquant ici
Pour afficher des accordéons à plusieurs emplacements de la page, vous pouvez remplacer "id=accordeons" par "class=accordeons".
Attention, à modifier votre script en conséquence ( ie : $("#accordeons") deviendra $(".accordeons").

2. la modification du script

Dans la fonction
       function (context, settings) {...}
il suffit j'ajouter la portion de code

      $( "#accordeons" ).accordion();

NB : penser à exécuter les étapes 4 - 5 et 6  vu à la page précédente qui votre modification soit visible.

information complémentaire disponible en cliquant ici

Il est possible de choisir quel soufflet de l'accordéon est ouvert lors du chargement de la page grâce aux options collapsible et active

  •  collapsible : booléen - true ( tous les souffets sont fermés) - false (par défaut)
  • active : entier (2 signifie que le 3ème soufflet est ouvert)
  • heightStyle: "auto" (défaut)  "fill" "content"(hauteur adaptée au contenu)

exemple :

         accordion({
                collapsible: true,
                active : 2
                heightStyle: "content"
            });

3. la modification de la librairie

Dans le fichier xxx.lbrairies.yml (xxx représente le nom de votre thème), ajouter la ligne suivante dans la sous-section dependencies de la section js.

       - jquery_ui_accordion/accordion

Dans monthème, cette section est reprise ci-dessous

  js:
    js/monScript.js: {}
  dependencies:
    - jquery_ui/core
    - jquery_ui_tooltip/tooltip
    - jquery_ui_tabs/tabs
    - jquery_ui_accordion/accordion

NB : si vous utilisez les bibliothèques jQuery intégrées au coeur de D8, cette section devrait être la suivante :

  js:
    js/dhv3.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui.tooltip
    - core/jquery.ui.tabs
    - core/jquery.ui.accordion
  

Mots Clé Système