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 présentées ci-après :

Ajout dans la page concernée, du contenu identifié "accordeons"¹;

Modification du script "js" vu à la page "ajouter un script" ;

Modification du fichier "libraries.yml" du thème.

Billet créé le :

21 nov 2020

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 et correspond donc au contenu de l'onglet "accordeons" ci-dessous.

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").

Accordéons

Cliquez sur le bouton pour copier le code dans le presse papier

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

2. la modification du script

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

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

NB : penser à exécuter les étapes 4 - 5 et 6 vu à la page "ajouter un script" pour que 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