Accordéon simple sans JavaScript

Cet article a été initialement publié sur Rails Designer

---

Ce n'est un secret pour personne que le HTML et le CSS se sont beaucoup améliorés au fil des ans. Et même si j'aime écrire du JavaScript, chaque fois que je peux m'en sortir, je le fais.

L'une de ces choses qui n'a pas besoin de JavaScript est l'accordéon typique. C'est le genre de composant simple à créer avec des frameworks JS comme Vue, Alpine et Stimulus, mais pour la version la plus basique, vous n'avez besoin d'aucun d'entre eux. Et pour les rendre beaux, tout ce dont vous avez besoin est du CSS.

Cet exemple est ce que je recherche. Vous voyez, il n’est pas nécessaire que ce soit le style typique d’une liste FAQ. L’utiliser pour des sections comme celle-ci fonctionne également parfaitement.

Cet article vient de :

• les bases ;
• pour ajouter un intérêt visuel ;
• pour refroidir les améliorations progressives de l'utilisation d'une fonctionnalité de stimulation avancée peu connue.

Les bases

La version la plus basique ressemble à ceci :

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Et voici à quoi ça ressemble :

Voir l'article original pour des exemples en direct. ?

Ce n'est pas le plus joli, mais ça marche !

Détails/attributs récapitulatifs

Il y a quelques astuces intéressantes que l'élément détails/résumé a dans sa manche.

• open-attribut ; vous pouvez définir cet attribut pour ouvrir un ou plusieurs éléments par défaut (il est également utilisé pour le CSS ci-dessous) ;
• ajouter nom-attribut ; cela permet à un seul élément details d'être ouvert. Lorsque vous en ouvrez un, tous les autres se ferment automatiquement.

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

Regardez-le :

Voir l'article original pour des exemples en direct. ?

Ajouter plus d'intérêt visuel

Les valeurs par défaut ne semblent pas très belles, ajoutons donc du CSS pour rendre les choses plus conformes à votre application. Les éléments clés sont :

• [&::-webkit-details-marker]: caché; cela masquera le chevron par défaut ;
• groupe-ouvert/détails : rotation-180 ; cela fait pivoter l'icône de chevron personnalisée en fonction de son état.

La version complète avec Tailwind CSS ressemblerait à ceci :

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

Pourquoi pouvez-vous utiliser cela ? Par exemple, stockez l'état de l'élément details dans le localStorage du navigateur afin qu'il soit persistant tout au long. Vérifions cela avec un petit contrôleur Stimulus :

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}

Besoin d'un autre exemple ? Un style de liste FAQ typique peut être vu sur la page de tarification.

C'est aussi simple qu'ajouter un accordéon avec du HTML simple. Vous pouvez commencer très simplement, puis ajouter un peu d'intérêt visuel avec CSS et compléter le tout avec quelques améliorations progressives avec un simple contrôleur Stimulus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!