Liste de <details> : fermer le composant de divulgation ouvert

Bonjour,

J'ai une liste d'éléments <details>.

Mettons...

<ul>
<li>
<details>
<summary>Un</summary>
<p>Texte Un</p>
</details>
</li>
<li>
<details>
<summary>Deux</summary>
<p>Texte Deux</p>
</details>
</li>
<li>
<details>
<summary>Trois</summary>
<p>Texte Trois</p>
</details>
</li>
</ul>

Je clique sur Un, Texte Un va s'afficher.
Maintenant je vais survoler Deux.

Je veux que Texte Un soit fermé au survol de Deux ou Trois.
Texte Deux se ferme au survol de Un ou Trois
etc.

Est-ce possible en CSS ?

Merci d'avance

Salut,

Réponse courte : non.

Bonjour Niuxe,

Niuxe a écrit :
Réponse courte : non.

Je m'en doutais mais on ne sait jamais, avec tous ces progrès...

Donc il faut un javascript.

La question a déjà été posée dans ce forum, voir cette discussion à laquelle tu avais apporté ta science..

C'était pour click, pas hover, mais le principe est le même.

Sur ce codepen j'ai copié-collé ton code, mais il y a une erreur.

Peux-tu me dire où ?
Modifié par boteha_2 (22 Feb 2026 - 12:45)

boteha_2 a écrit :

...
Sur ce codepen j'ai copié-collé ton code, mais il y a une erreur.
....

Ce script dépend de jQuery . Tu ne le charge pas.

cdt

Bonjour gcyrillus,

gcyrillus a écrit :
Ce script dépend de jQuery . Tu ne le charge pas.

Justement, j'aimerais rester en javascript simple que je maîtrise un chouïa.

Sur mon codepen j'ai commencé à écrire le code.

Je cible tous les summary de la liste.

Si un summary est survolé
Alors je ferme tous les détails correspondant aux autres summary

J'ai un peu de mal avec la déclaration de cette action, peux-tu m'aider ?

boteha_2 a écrit :

...tu avais apporté ta science..

Un peu condescendant n'est ce pas ? Tu voulais plutôt dire : « ma solution » ?

Je ne m'en souvenais plus du tout de ce post. La personne l'avait écrit en jquery. J'avais gardé sa syntaxe.

en natif ?
html :

<ul>
      <li>
        <details>
          <summary>titre 1</summary>
          <p>Chuck Norris joue au golf avec une balle de basket. Apres sa circoncicion le prepuce de Chuck Norris a permis de convier tout l'hopital a une pierrade... Chuck Norris boit sa bière dans le Saint Graal.</p>
        </details>
      </li>
      <li>
        <details>
          <summary>titre 2</summary>
          <p>Ce n'est pas Edison qui inventa l'ampoule électrique, c'est juste Chuck Norris qui eu une idée. Aucun magicien n'a jamais tenté de scier Chuck Norris. La peur de l'échec. Le titre originel de Star Wars était "Skywalker: Texas Ranger". Le prototype de Chuck Norris s'appelait Achille, il avait un petit défaut au talon. Chuck Norris peut te citer 9 différences entre un pigeon !</p>
        </details>
      </li>
      <li>
        <details>
          <summary>titre 3</summary>
          <p>Si Juda a dénoncé Jésus, c'est par se qu'il avait trop peur de dénoncer Chuck Norris. Seul Chuck Norris peut chercher midi à quatorze heures... et trouver surtout ! L'alcool rend ivre mais Chuck Norris assomme. Quand Chuck Norris a faim, il tourne un navet.</p>
        </details>
      </li>
    </ul>

en vanilla js :

(() => {
  document.querySelector('ul').addEventListener('mouseover', e => {
    const currentDetail = e.target.closest('details')
    if (e.target.tagName.toLowerCase() === 'summary') {
      e.preventDefault()
      const isOpen = currentDetail.hasAttribute('open')
      document.querySelectorAll('details').forEach($e => $e.removeAttribute('open'))
      if (!isOpen) {
        currentDetail.setAttribute('open', '')
      }
    }
  })
})()

Modifié par Niuxe (22 Feb 2026 - 17:45)

Niuse,

Merci de ton suivi.

Niuse a écrit :
Un peu condescendant n'est ce pas ? Smiley ohwell Tu voulais plutôt dire : « ma solution » ?

Pas du tout condescendant de mon point de vue, gardons "solution" si tu préfères.

J'ai copié_collé ton code sur le codepen.

Avec mouseover il y a deux petits inconvénients.
Ton script ne se contente pas de fermer les details ouverts.
1) Il ouvre aussi le détail survolé, ce qui n'était pas demandé.
2) Tu ouvres Un, puis tu déplaces le pointeur vers la droite, puis tu reviens sur Un : Un se ferme ce qui n'est pas souhaité.

Par contre, en remplaçant mouseover par click les deux inconvénients disparaissent.
C'est sans doute ce que je vais faire, c'est cohérent avec le fonctionnement de details.

Ah okay, j'avais cru avoir compris de travers, alors j'avais l'intention de te proposer:

const sum = document.querySelectorAll("ul > li > details > summary");

[].forEach.call(sum, function (item) {
  item.closest('details').addEventListener("mouseover", function(){
    if (this.hasAttribute("open") === false) {
      for (dtls of document.querySelectorAll("details")) {
        dtls.removeAttribute("open");
      }
    }
  });
});

Pour l’événement, ce n'est pas hover mais mouseover

Hello gcyrillus,

Merci pour ton code, il fait ce qu(il faut.

Avec mouseover il y a un petit inconvénient.

Tu ouvres un detail, tu déplaces le pointeur en dehors du bloc ul, le detail se ferme.

Avec click cet inconvénient disparait.

Voir le codepen.

Et le même codepen avec click.
Modifié par boteha_2 (22 Feb 2026 - 19:25)

Bonjour,

Voir le codepen avec click.

Pour moi cela fonctionne bien.

Dernière chose : serait-il possible qu'au click sur le summary le detail correspondant soit placé à une certaine hauteur dans la page, par exemple Top: 0.

Je pense que ce serait un effet assez ergonomique sur petit écran.

Une transition CSS devrait faire l'affaire, non ?
Modifié par boteha_2 (24 Feb 2026 - 20:44)