Parce que la présentation de contenus en accordéon revient régulièrement, autant faire un petit constructeur Javascript Vanilla qui va simplifier la tâche !

Github repository

HTML

Conteneur principal avec classe .accordion
Attribut data-default détermine l'état par défaut : "opened", les accordéons sont ouverts / "closed", ils sont fermés.
Attribut data-only-one détermine si on peut ouvrir plusieurs volets : "true", on ne peut pas! / "false" (ou pas d'attribut), on peut.
Chaque enfant de ce bloc .accordion est un volet et doit contenir :
    Un élément avec classe .open-close
    Un élément avec classe .accordion-desc qui doit contenir un élément avec classe .desc-cont (pour le calcul de la hauteur) <ul class="accordion" data-default="closed" data-only-one="true">     <li>         <h2 class="open-close"><span class="title">Labore explicari temporibus ut nam, qui in solet eruditi gloriatur.</span><span class="picto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 21" width="12" height="22"><path fill="none" stroke="#000000" stroke-miterlimit="10" d="M.5 1l10.504 9.629L.5 20.112"/></svg></span></h2>         <div class="accordion-desc">             <div class="desc-cont">                 <p>Ex est mundi ridens utamur etc.</p>             </div>         </div>     </li>     <li>     etc. </ul>

CSS

Le seul pré-requis concerne l'élément .accordion-desc : overflow: hidden; transition: max-height $speed1 $defaultEase; Le reste, c'est de l'habillage : scss/common/_accordion.scss

Javascript

• Inclure le constructeur Vanilla regal-accordion-vanilla.min.js (2.23Ko)
  
• Version non minifiée : regal-accordion-vanilla.js

<script src="js/regal-accordion-vanilla.min.js"></script>

Déclarer les accordéons :

var accordions = document.querySelectorAll('.accordion'); if(accordions){     accordions.forEach(function(elt){         elt.acc = new RegalAccordion(elt);     } } Je stocke l'objet RegalAccordion dans l'élément HTML lui-même (elt.acc) de façon à pouvoir en appeler facilement les méthodes publiques.

Méthodes publiques :

Pour détruire l'accordéon. elt.acc.destroy()
Pour updater la hauteur de l'accordéon si jamais son contenu change. elt.acc.slideDown()

Forcer ouverture d'un volet avec une ancre dans l'URL

On peut aussi forcer l'ouverture d'un volet en passant une ancre dans l'URL.
Si l'objet RegalAccordion contient un élément avec un identifiant identique à l'ancre, le volet correspondant est ouvert. L'élément identifié peut être celui avec classe .open-close ou tout autre élément contenu dans l'élément .accordion-desc.

Démos

Un accordéon fermé par défaut, avec 1 seul volet ouvert à la fois :

• Labore explicari temporibus ut nam.

  

  Ex est mundi ridens utamur, vel equidem volumus eu, nec ne putant commodo necessitatibus. Mutat euripidis est cu, ad usu veniam option accusata. Ut ipsum virtute numquam mei, mei suas adipisci ne. Sit stet molestie in, prima nemore et duo. Eum wisi porro similique ne, eum ea modus aperiam. Ea dico iriure aliquando cum, mel prima platonem dissentias at, sit te vocent facilisi deserunt. Cu omnes facilisi prodesset mei.

  Scripta consectetuer vim no, alia hendrerit ullamcorper et vim. Et mel vide noster facete, eius nullam volutpat vim et, no laoreet epicurei consectetuer duo. Ea lorem dolore nec, et vel nihil dolores dignissim. Vim ei illud lorem assentior, te latine mentitum explicari quo. Pri accusam assueverit no. No enim detraxit patrioque his, eum solet tamquam iudicabit ad.

• Ex est mundi ridens utamur.

  

  His in novum corrumpit. Ei cetero assueverit usu. In duis discere fabulas duo, an everti commodo ius. Scaevola argumentum in duo. Vocent fastidii reprimique his id, ex usu nullam timeam molestie, affert similique cu his.

  Duo no assum reprehendunt, dolore aliquam ad cum. Ut causae democritum efficiantur qui, ius at nisl probo legendos, atqui apeirian argumentum in vix. Alia debet explicari in qui. Illum maiorum tibique ut est. Duo id errem primis vocibus, cu cum dicant dignissim liberavisse. Tota efficiendi eu his, te dicit patrioque sit.

  Ea ubique impedit vis, mel at etiam iusto nonumy. Omnis tation rationibus pri id. Duo modo lorem mazim et, cu duo case voluptatum, sale epicurei ea eam. Ad quem modo choro ius, qui ei fuisset mandamus accommodare, verear apeirian suscipiantur quo te. Rebum numquam facilis ea sea, no pro mundi homero evertitur. Mei laudem causae indoctum ex. Ad vix enim ancillae, vix veniam impetus torquatos ut, veniam fabulas ex sed.

Un accordéon avec un élément ouvert par défaut :

• Labore solet eruditi gloriatur.

  

  Ex est mundi ridens utamur, vel equidem volumus eu, nec ne putant commodo necessitatibus. Mutat euripidis est cu, ad usu veniam option accusata. Ut ipsum virtute numquam mei, mei suas adipisci ne. Sit stet molestie in, prima nemore et duo. Eum wisi porro similique ne, eum ea modus aperiam. Ea dico iriure aliquando cum, mel prima platonem dissentias at, sit te vocent facilisi deserunt. Cu omnes facilisi prodesset mei.

  Homero munere nemore an per, ius ei nibh ullum consetetur, ut nam agam intellegat. Nibh adversarium duo ne, errem semper legendos at qui. Eu vel copiosae percipit explicari. Inani omnes euripidis ne sea, mazim accusam concludaturque nec ut. Eam eu nihil accusamus. At vim propriae suscipiantur, quodsi adipisci est ad.

• Ex vel equidem volumus eu

  

  His in novum corrumpit. Ei cetero assueverit usu. In duis discere fabulas duo, an everti commodo ius. Scaevola argumentum in duo. Vocent fastidii reprimique his id, ex usu nullam timeam molestie, affert similique cu his.

  Duo no assum reprehendunt, dolore aliquam ad cum. Ut causae democritum efficiantur qui, ius at nisl probo legendos, atqui apeirian argumentum in vix. Alia debet explicari in qui. Illum maiorum tibique ut est. Duo id errem primis vocibus, cu cum dicant dignissim liberavisse. Tota efficiendi eu his, te dicit patrioque sit.

  Ut vel labores platonem, eos cetero inciderint signiferumque eu. Quis quaeque dissentias quo an, quo no invenire atomorum intellegam. In ius justo apeirian, qui no choro nominati, id ignota audiam interpretaris duo. Vim stet repudiandae disputationi et, copiosae evertitur adipiscing ex qui, ipsum aeque congue ad est. Id usu meis consequat urbanitas, duis fuisset ullamcorper usu no, persius mediocrem ei est.

• Labore explicari temporibus ut nam, qui in.

  

  Ex est mundi ridens utamur, vel equidem volumus eu, nec ne putant commodo necessitatibus. Mutat euripidis est cu, ad usu veniam option accusata. Ut ipsum virtute numquam mei, mei suas adipisci ne. Sit stet molestie in, prima nemore et duo. Eum wisi porro similique ne, eum ea modus aperiam. Ea dico iriure aliquando cum, mel prima platonem dissentias at, sit te vocent facilisi deserunt. Cu omnes facilisi prodesset mei.

  Detracto recusabo mea ea, mei errem altera noster no. Duo alienum sensibus vituperatoribus ut, vim cu tation ignota posidonium, sed reque eirmod albucius ei. Mel quodsi voluptatum te, te pro ornatus gloriatur, ad ius postea splendide. Eu per sint iudico, dolorum delicata sit ex.

Un accordéon ouvert par défaut :

• Ne dolore scripta verterem sea.

  

  Lorem ipsum dolor sit amet, an sea ancillae scriptorem, usu consul utroque ad, ne dicat tibique recteque vim. Mei munere debitis ei, ut viris mentitum mei, an nam dicat possit detracto. In corpora blandit his. Utamur conclusionemque an eam. Nec id nullam iriure partiendo. Cu diam expetendis ius, nam exerci munere partiendo ut.

• Sonet possit placerat no ha.

  

  Lorem ipsum dolor sit amet, mei id mutat zril timeam. Eu duo constituam scripserit. No unum timeam nec, in vim tale nihil delectus, no movet omnes forensibus sea. Quidam delenit appetere in mel, vis ei nulla recusabo contentiones. Id est euismod abhorreant.
  Eu usu gubergren necessitatibus, at duo wisi disputationi, eu noluisse liberavisse eum. Vis id aeque soluta maluisset, vim stet veniam mnesarchum no. Qui at dolore perfecto vituperata, ne detracto assueverit sea, sea id petentium abhorreant. Has ei persecuti ullamcorper, perpetua rationibus no mea. At atqui deseruisse sit, eum no brute prodesset. Vel id erat audiam, vocibus fastidii ut vel, discere menandri mei ad.