[Résolu] Afficher en fonction du clic

Bonjour,

Je me permets de vous contacter car j'ai une question.

J'ai 3 boutons qui permettent d'afficher 3 div différentes.

De base, les 3 div sont en "display: none".

Dans mon fichier JS, j'ai dit :

- Si je clique sur le bouton 1, la div 1 s'affiche, la 2 et la 3 ne s'affichent pas.
- Si je clique sur le bouton 2, la div 2 s'affiche, la 1 et la 3 ne s'affichent pas.
- Si je clique sur le bouton 3, la div 3 s'affiche, la 1 et la 2 ne s'affichent pas.

Code actuel (CodePen)

Si j'ai plusieurs div à gérer, cette solution est "fastidieuse".

N'existerait-il pas une autre façon d'obtenir le résultat souhaité en "automatisant" le tout ?
Peut-être en utilisant des variables ?

Merci de votre aide

Bah tu fais :
- Si tu appuies sur une des div : la div choisie est en display: block et les autres en none,
Pas obligé de faire du cas par cas

Merci de votre aide

Réussir à obtenir le résultat souhaité sans jQuery, top !

Bonjour MickFR,

Juste pour info, une autre façon de faire en CSS
https://codepen.io/Zonecss/pen/XxVozQ

@aliasdmc,

La technique de :target est intéressante. Elle souffre toutefois de 2 inconvénients :
* On ne peut pas pré-activer une des <div> de couleur. Certes on peut simuler un clic sur un <a> avec Javascript
* on modifie l'URL dans la barre de navigation

La technique avec <input type="radio"> pallie à ces deux problèmes.

Merci pour la démo.

Bonjour aliasdmc,

Merci pour la solution proposée.
C'est intéressant de prendre connaissance de plusieurs méthodes.

Ce qui me gêne, c'est le fait qu'"on modifie l'URL dans la barre de navigation".

Merci encore