Comment fonctionne un Accordéon Javascript?

Question

Je voudrais créer mon propre composant d'accordéon sans utiliser de toolkit AJAX, principalement à des fins d'apprentissage. Je ne sais pas trop par où commencer avec celui-ci. Je suppose que je commencerais par créer des div pour chaque section de l'accordéon. Peut-être que chaque div contiendrait un en-tête, qui serait le bouton sélectionné pour déplacer l'accordéon vers cette section. Je ne suis pas sûr que l'approche correcte à prendre une fois qu'un bouton section d'accordéon est sélectionné cependant. Serais-je utiliser l'ordre z, de sorte que chaque section est d'un ordre z plus élevé? Toute aide est appréciée.

Merci

Answer 1

Je vous recommande fortement de prendre un livre tel que Pro JavaScript techniques de John Resig qui vous donnera quelques idées et réflexions initiales sur la façon d'aborder l'élaboration de vos propres solutions côté client.

Essentiellement, vous auriez un élément d'agir comme un en-tête, par exemple <h1> ou <div> sous lequel vous auriez un <div> avec un style initial de display: none;. Configurez un gestionnaire d'événement sur l'événement click de l'en-tête pour changer le style de div ci-dessous en display: block et en vérifiant que tout autre contenu <div> s est caché (faites ceci en utilisant une classe CSS sur chaque contenu <div> par exemple). Je vais vous laisser l'animation lisse comme un exercice pour savoir comment cela pourrait être accompli. Comme un indice, je recommande de regarder comment une bibliothèque JavaScript comme jQuery gère l'animation, en vérifiant la source.

Answer 2

Voir this question, vous remarquerez que ma réponse contient une démo avec le fonctionnement de base qui devraient vous aider à démarrer. Il a seulement été demandé il y a quelques minutes!

Il utilise jQuery.

Answer 3

La meilleure façon de commander ce serait ce

<div id="accordion"> 
<h3 class="accordion title">Title</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 2</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 3</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 4</h3> 
<div class="accordion section"> 
    Section Content 
</div> 
</div> 

Vous voulez éviter z-order tout à fait, car il est un gâchis de compatibilité. Au lieu de cela, vous auriez les titres d'accordéon sur lesquels vous cliqueriez pour ouvrir l'accordéon. Par défaut, vous souhaitez définir l'ensemble de la section accordéon <div> sur visibility:hidden;, puis, lorsque vous cliquez sur l'un d'entre eux, modifiez sa visibilité et masquez tous les autres. Si vous voulez que cela fonctionne avec n'importe quelle quantité de sections d'accordéon, vous devez compter <h3 class="accordion title"> et chaque <div class="accordion section">, et les associer dans un tableau. Quand un titre est cliqué, montre son div correspondant. Alternativement, vous pourriez donner à chacun une identification distincte, mais la première serait beaucoup plus utile.

En fait, il pourrait être display:none; au lieu de visibility:hidden;, je voudrais essayer les deux. En outre, il est important de mentionner que l'animation est généralement traitée en changeant des choses comme la taille de la div, donc si vous cachais une section, vous feriez la hauteur de plus en plus petite jusqu'à 0 et elle est cachée.