[Résolu] Signe + ou - devant un titre pour plier déplier

Bonjour à tous et mes meilleurs vœux pour cette nouvelle année,

En 2017, une bonne âme dont je m'excuse de ne pas me rappeler le nom m'a sauvé ici même.

Il s'agissait de déterminer le comportement de blocs d'infos à déplier ou replier avec un minimum de code CSS.

La solution était :

[class^="radio"]{display:none [id^="label"]:checked~div{display:block}

Par défaut le DIV le plus proche du LABEL est plié, et checker ce label le déplie. Ce qui vaut pour les éventuelles dizaines de blocs à afficher. C'est juste impeccable.

Mais j'aimerais un visuel plus explicite du statut d'un bloc selon qu'il est plié ou déplié.

Le plus clair est le signe + ou - placé devant le titre du LABEL, selon l'état checké ou pas.

Dans deux éléments SPAN enfants du LABEL j'ai donc par défaut le + visible puis le - display none.

Et je n'arrive pas à trouver le moyen de prolonger

[id^="label"]:checked~div{display:block}

avec du code pointant sur un attribut .class ou .div de chacun de ces deux SPAN afin que dans ce cas le signe + disparaisse remplacé par le signe -.

Plutôt qu'une absence de solution, c'est sûrement moi qui n'ai pas su chercher.

Je remercie d'avance d'avance la bonne personne qui m'indiquerait une piste, ou la doc idéale pour bien comprendre.

Belle journée à vous.
Modifié par mango (20 Jan 2021 - 00:10)

Bonsoir,

Tu peut te servir d'un pseudo a partir d'un label et changer son contenu selon le statut checked d'un input .

[id^="label"] + label:before {
  content: "+"; 
}

[id^="label"]:checked + label:before {
  content: " - ";
}

petite démo : https://codepen.io/gc-nomade/pen/VwKRMdB ( sans ton code HTML , c'est une supposition de structure)

Cdt
Modifié par gcyrillus (20 Jan 2021 - 00:41)

Merci beaucoup gcyrillus,

C'est exactement ce que je cherchais, et même bien mieux puisque cela épargne l'adjonction en préfixe de 2 <SPAN> dont un caché, et supprime le moindre caractère physique précédant le titre du <LABEL>.

Je vais pouvoir l'appliquer très vite.

Belle fin de journée.

mango a écrit :
Il s'agissait de déterminer le comportement de blocs d'infos à déplier ou replier avec un minimum de code CSS.

Bonsoir. Tout de même au cas où : intéressez-vous aussi au html details/summary, ne serait-ce que pour connaître :

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Un lien : details/summary
Modifié par Olivier C (20 Jan 2021 - 20:21)

Merci Olivier C,

Je ne connaissais pas cette possibilité, également très intéressante, que je vais explorer très vite.

Bonne journée à vous.
Modifié par mango (21 Jan 2021 - 13:08)