Afficher/masquer une div au click

Version imprimable

Bonjour,
je viens vers vous, car je n'arrive pas à obtenir le résultat voulu dans mon exercice.
Je m'explique : je suis débutant en programmation web. Après avoir suivi différents cours en javascript puis jQuery, je me suis lancé un exercice à moi même, pour sortir des cadres du cours et faire de moi même.
Donc l'idée était de créer un site relativement simple. html et css tout va bien. Mais voilà, dans le corps du site, j'ai eu l'idée de mettre 3 boutons, chacun correspondant à la déscription d'un service. Lorsque l'on clique, sur l'un des boutons, la description du service apparaît au centre de l'écran, et disparaît lorsque l'on clique à coté ou sur l'un des deux autres boutons. Voilà l'idée.
Dans la pratique, j'ai donc crée 3 <button> chacun avec un ID. Ensuite, j'ai crée 3 <div> avec ID et class.
En script, voilà ce que j'ai fait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 $(document).ready(function(){ $(".descriptionserv").hide(); // $("#btnecr").click(function(){ $("#ecriture").toggle(300); $("#creasites").hide(300); $("#design").hide(300); }); $("#btncrea").click(function(){ $("#creasites").toggle(300); $("#ecriture").hide(300); $("#design").hide(300); }); $("#btndesign").click(function(){ $("#design").toggle(300); $("#creasites").hide(300); $("#ecriture").hide(300); }); });
Voilà, ce n'est pas très "orthodoxe", mais ça fonctionne. Mais, je pêche totalement lorsque je veux rajouter la fonction de pouvoir fermer la description en cliquant en dehors de la description... Et puis, il y a peut-être une meilleure façon d'écrire ce code. Donc je ne viens pas ici pour forcément avoir une réponse avec un code tout fait, mais plus dans l'optique d'avoir des conseils pour orienter ma réflexion dans le bons sens/ordre. Mon objectif est d'y arrivé sans faire de copier-coller. Mais je n'ai peut-être pas structuré ma pensé correctement...
J'espère avoir réussi à être clair.

Merci d'avance !

15/11/2019, 17h34
Toufik83

Citation:

Envoyé par MikDream

...lorsque je veux rajouter la fonction de pouvoir fermer la description en cliquant en dehors de la description...

Tu peux attacher un écouteur d'événement "click" sur le <body> qui permet de masquer/fermer la description, et après il va falloir gérer la propagation des événements click sur #btnecr,#btncrea,#btndesign avec stopPropagation()
16/11/2019, 08h47
MikDream

Merci pour cette réponse !
J'avais déjà pensé à mettre le 'click' sur le <body>, mais du coup cela avait pour conséquence de fermer immédiatement à l'ouverture les descriptions... Mais je n'avais pas pensé à la propagation... Je vais m'y atteler !
Merci :D

Bonjour,

je t'invite à faire une recherche : :recherch: "ouvrir fermer div au click"
Tu trouveras des solutions, notamment avec des class (plutôt que des id), qui permettront une plus grande flexibilité.
Par exemple, celle-ci.

Démo : https://codepen.io/jreaux62/pen/BaaGOYQ

Code:

1
2
3
4
5
6
7
8
9
10
11
<div>
  <button type="button" class="btn" data-id="1">1</button>
  <button type="button" class="btn" data-id="2">2</button>
  <button type="button" class="btn" data-id="3">3</button>
</div>
 
<div>
  <div class="box" id="box-1">one</div>
  <div class="box" id="box-2">two</div>
  <div class="box" id="box-3">three</div>
</div>

Code:

1
2
.btn { cursor:pointer; }
.box { display:none; padding:10px; border:1px dashed #ccc; background:#eee; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
 
  // clic sur les boutons
  $('.btn').on('click',function(event){
    event.stopPropagation(); // important
    var id = $(this).data('id');  // on récupère le data-id
    $(".box:not(#box-"+id+")").hide(); // on ferme les box, sauf celle concernée
    $("#box-"+id).slideToggle(); // on ouvre ou ferme celle concernée
  });
  // clic en dehors des div
  $(window).on('click', function(){
    $(".box").slideUp(); // on ferme
  });
 
});

16/11/2019, 12h02
MikDream

Bonjour,
merci pour cette réponse. J'avais effectué des recherches, mais cela ne correspondait pas trop à ce que j'avais en tête... Peut-être que mes recherches n'était pas assez précises... Mais je n'avais pas pensé à privilégié les class. En regardant le code que vous m'avez envoyé, ça correspond plus à l'idée. Et je ne connaissais pas l'utilisation des "data-id" sur les boutons... Je vais étudier ce code, et l'adapter à mes besoins !
Merci beaucoup !
Je vais mettre le sujet en "résolu", car je pense que j'ai tous les éléments de réflexion qu'il me fallait pour parvenir à faire mon exercice :).

Merci encore