Afficher des contenus en accordéon avec JavaScript

Concept et utilisation

La fonction accordion() permet d'afficher des contenus HTML avec un effet de "plier / déplier".

Fonction

accordion()

Applique l'effet accordéon sur des contenus.

Syntaxe

accordion(contenus, fonction_de_rappel);

Paramètres

contenus(Node / NodeList): Le paramètre contenus de la fonction accordion() définit le ou les contenu(s) pour lesquels appliquer un effet d'accordéon.
fonction_de_rappel(Function): Le paramètre fonction_de_rappel de la fonction accordion() définit une fonction à appliquer lors du clic sur une entête de contenu en accordéon.

Structure des contenus en accordéon

Les contenus à afficher en accordéon doivent respecter une structure HTML et être composés d'un conteneur imbriquant une entête à cliquer et un contenu à plier / déplier. Un contenu accordéon peut imbriquer un autre composant accordéon.

Les balises de contenus en accordéons sont définies avec des classes particulières :

.accordion : sélecteur de conteneur d'un composant accordéon
.accordion-head : sélecteur d'entête cliquable de l'accordéon
.accordion-inner : sélecteur de conteneur du contenu de l'accordéon
.accordion-content : sélecteur de contenu de l'accordéon

Exemple d'effet accordéon sur un contenu

<div class="accordion">
  <div class="accordion-head">
    <h3>ENTÊTE</h3>
  </div>
  <div class="accordion-inner">
    <div class="accordion-content">
      <p>CONTENU</p>
    </div>
  </div>
</div>

<script>
  var contenus = document.querySelectorAll('.accordion');
  var fonction_de_rappel = function(element) {
    console.log('Élément cliqué :', element.textContent);
  };
  accordion(contenus, fonction_de_rappel);
</script>

Code source de la fonction

function accordion(a,b){b=b||null;var u=document,x='accordion';if(u.querySelector("."+x+"-binded")===null){
s=u.styleSheets[u.styleSheets.length-1];g=function(r){s.insertRule(r);};g("."+x+"-head,."+x+"-inner,."+x+
"-content{overflow:hidden;}");g("."+x+"-inner{transition:height 1s;}");g("."+x+"-binded ."+x+"-inner{height:0;}");}
if(a.nodeType===Node.ELEMENT_NODE){a=[a];}var c=a.length,d,y='active',e=function(a){a.classList.add(x+'-binded');
var h=a.querySelector('.'+x+'-head'),i=a.querySelector('.'+x+'-inner'),c=a.querySelector('.'+x+'-content');
var z=function(a,i,b){i.style.height=i.offsetHeight+'px';setTimeout(function(){i.style.removeProperty('height');
a.classList.remove(''+x+'-'+y);if(typeof b==='function'){b(a)}},10)};h.addEventListener('click',function(){
if(a.matches('.'+x+'-'+y)){z(a,i,b)}else{a.classList.add(''+x+'-'+y);i.style.height=c.offsetHeight+'px';
if(typeof b==='function'){b(a)}}var p=a.parentNode,q=p.parentNode,r=q.querySelectorAll('.'+x+''),l=r.length,k;
if(l>0){for(k=0;k<l;k++){var m=r[k].querySelector('.'+x+'-inner');if(m!==i){z(r[k],m)}}}while(p!==u.body){
if(p.matches('.'+x)){p.querySelector('.'+x+'-inner').style.height='auto'}p=p.parentNode}});
window.addEventListener('resize',function(){if(a.matches('.'+x+'-'+y)){i.style.height=c.offsetHeight+'px'}})};
if(c>0){for(d=0;d<c;d++){e(a[d])}}}

Dernière mise à jour le 7 Novembre 2023.