Fermer

mars 17, 2025

Un guide simple / blogs / perficient

Un guide simple / blogs / perficient


Un accordéon est un élément d’interface utilisateur qui affiche du contenu d’une manière compacte et économique. Il permet aux utilisateurs de développer ou d’effrayer des sections, ce qui en fait un excellent choix pour les sections FAQ, les menus ou tout contenu qui peut être organisé en panneaux pliables.

Dans ce guide, nous vous expliquerons comment implémenter un accord simple avec HTML, CSS et JavaScript.

Qu’est-ce qu’un accordéon?

Un accordéon se compose généralement de plusieurs sections. Chaque section a un titre et un contenu caché qui est révélé lorsque le titre est cliqué. Cliquez sur un titre de section cache les autres tout en révélant celui cliqué. Cela crée une expérience utilisateur propre et interactive.

Aperçu:

Accordéon

Étape 1: index.html (notre structure HTML)

Commençons par la structure HTML de base de l’accordéon.

Voici le code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://blogs.perficient.com/2025/03/17/implementing-an-accordion-with-javascript-a-simple-guide/index.css" rel="stylesheet">
  <title>Welcome in my accordion</title>
</head>
<body>

  <div class="accordion">
    <h1><i>Generals Questions</i></h1>
    <div class="expand">
      <button type="button" class="btn_expand">
      </button>
    </div>
    <div class="accordion-item hide">
      <h3 class="title"> You Accept Major Credit Cards?</h3>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>
      </div>
    </div>
    <div class="accordion-item hide">
      <h3 class="title"> Do You Support Local Farmers ? </h3>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>
      </div>
    </div>
    <div class="accordion-item hide">
      <h3 class="title"> Do You Use Organic Ingrediants ? </h3>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p>
      </div>
    </div>

  </div>
<script src="index.js"></script>
</body>
</html>

Éléments clés du HTML

    • Conteneur d’accordéon: L’emballage principal de l’accordéon, qui contient tous les articles.
    • Articles d’accordéon: Chaque élément se compose d’un titre (

      ) et de contenu (

      ), qui est initialement caché.

    • Développez tout le bouton: Ce bouton permet aux utilisateurs de développer ou d’effondrer toutes les sections à la fois.

Étape 2: index.css (styliser la page avec CSS)

Bien que nous n’allons pas dans les détails du CSS ici, il est crucial pour rendre l’accordéon présentable. La classe .Hide est utilisée pour masquer le contenu par défaut, tandis que la classe .show est utilisée pour afficher le contenu lorsque la section accordéon est étendue.

.accordion-item .content {
  display: none;
}
.accordion-item.show .content {
  display: block;
}
.accordion-item.hide .content {
  display: none;
}

Étape 3: JavaScript: le faire interactif

Maintenant, plongeons-nous dans le code JavaScript qui rend cet accordéon interactif. Nous gérerons deux choses clés:

  1. Basculer les sections individuelles: Lorsqu’un utilisateur clique sur le titre d’une section, il devrait basculer entre l’affichage et la cachette du contenu.
  2. Élargir / effondrer toutes les sections: Le bouton «Expand All» permettra aux utilisateurs de développer ou d’effondrent toutes les sections à la fois.

Voici le code pour cela:

let content = document.querySelectorAll('.accordion-item');
let title = document.querySelectorAll('.accordion-item .title');
let x = 'isopen';
const clickDefault = () => {
    for (let i = 0; i < title.length; i++) {
        title[i].onclick = function () {
            let contentClass = this.parentNode.className;
            for (let j = 0; j < content.length; j++) {
                content[j].className="accordion-item hide";
            }
            if (contentClass == 'accordion-item hide') {
                this.parentNode.className="accordion-item show";
            }
        }
    }
}
clickDefault();
const clickExpand = () => {
    for (let i = 0; i < title.length; i++) {
        title[i].onclick = function () {
            let contentClass = this.parentNode.className;
            if (contentClass == 'accordion-item show') {
                this.parentNode.className="accordion-item hide";
            } else if (contentClass == 'accordion-item hide') {
                this.parentNode.className="accordion-item show";
                clickDefault();
            }
        }
    }
}
let expandButton = document.querySelector('.btn_expand');
expandButton.innerHTML = "Expand All";
expandButton.onclick = function () {
    if (x === 'isopen') {
        content.forEach((element="accordion-item hide") => {
            element.className="accordion-item show";
            expandButton.innerHTML = "Close All";
            x = 'isclose';
            clickExpand();
        });
    } else if (x === 'isclose') {
        content.forEach((element="accordion-item show") => {
            element.className="accordion-item hide";
            expandButton.innerHTML = "Expand All";
            x = 'isopen';
        });
    }
}

Comment fonctionne le JavaScript:

  1. Fonction ClickDefault:
    • Cette fonction écoute les clics sur chaque titre et bascule la visibilité du contenu correspondant. Lorsqu’une section est élargie, toutes les autres sont effondrées.
  2. Fonction ClicKexpand:
    • Cette fonction permet à chaque section de basculer entre les états étendus et effondrés indépendamment lorsqu’il est cliqué.
  3. Gestion du bouton «Étendre tout»:
    • La fonction expandbutton.onclick bascule entre l’expansion et l’effondrement de toutes les sections. Lorsque vous cliquez sur, le bouton modifie le texte entre «développer tout» et «fermer tout».

Sortir:

Quand le Fermé tous Le bouton cliqué que toutes les sections seront fermées:

Accordéon

Quand le Développer tout bouton cliqué que toutes les sections seront élargies:

AccordionExpand

Lorsque le bouton «Étendre tout» est cliqué, toutes les sections seront élargies, affichant tout leur contenu à la fois. Après, chaque élément peut être fermé individuellement en cliquant sur son titre respectifsans effondrer automatiquement d’autres sections ouvertes.

Extension Cliquez sur Individu

Lorsque le bouton «Fermer All» est cliqué, toutes les sections seront effondrées. Après, quand tu développer une nouvelle section, La section précédemment ouverte fermera automatiquements’assurer qu’une seule section est ouverte à la fois.

Accordion individuel click

Conclusion

Dans ce guide simple, nous avons construit un accordéon en utilisant HTML, CSS et JavaScript. L’accordéon fournit un moyen efficace de présenter de grandes quantités d’informations sous une forme compacte, améliorant l’expérience utilisateur en permettant aux sections de se développer ou de s’effondrer en un simple clic.



Le meilleur outil 2023 pour ta croissance Instagram !



Source link