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 :
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...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); }); });
J'espère avoir réussi à être clair.
Merci d'avance !
Partager