Hide/Show en javascript

Par agrafik, il y a 7 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec quelque chose que je souhaite faire

Ce que je fais

Je souhaiterai afficher/masquer une div

CODE HTML (Créé moi même)

<div class="wrap1"> <h3> Epreuve Théorique Générale (ETG) <button onclick="toggle_div(this,'hidshow');" type="button" href="#" class="formations">+</button></h3> <div id="hidshow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>

CODE JAVASCRIPT (trouvé sure le web, correspond pas mal)

function toggle_div(button, formations) { // On déclare la fonction toggle_div qui prend en param le bouton et un id var div = document.getElementById('hidshow'); // On récupère le div ciblé grâce à l'id if(div.style.display=="none") { // Si le div est masqué... div.style.display = "block"; // ... on l'affiche... button.innerHTML = "-"; // ... et on change le contenu du bouton. } else { // S'il est visible... div.style.display = "none"; // ... on le masque... button.innerHTML = "+"; // ... et on change le contenu du bouton. } }

Ce que je veux

Je voudrai obtenir l'ouverture ou la fermeture de la DIV HIDSHOW en cliquant sur le bouton (à l'avenir je ferai cliquer le titre plutôt)
Sauf que j'ai besoin de 4 fois cette DIV et lorsque je la copie/colle il y a interference entre toutes le div (elles ont le même nom, forcement)
Comment pourrais-je obtenir le résultat que je souhaite ? Je penses qu'il faudrait inclure un ID particulier à chaque DIV HIDESHOW mais comment faire en JS ? Est-ce possible ? (J'ai regardé je ne trouvep as d'infos la dessus)

Merci beaucoup pour votre aide ça me sera grandement utile
Bonne journée à toutes et tous !!

4 réponses

Defy, il y a 7 ans

Un ID est unique a la page, donc pas de possibilité d'avoir plusieur fois le meme id dans une page. Pour faire plus simple, tu change le bouton en <a>, le href du <a> c'est l'ancre de l'id de ta tab du coup peut faire autant de div que tu veut, du moment que le <a> contient en href l'id qui lui correspond. Tu n'as plus qu'a récupérer la valeur du href, et faire ton document.getElementById avec le href.

exemple d'html

<div class="wrap1"> <h3> Epreuve Théorique Générale (ETG) <a href="#id_show" class="formations">+</button></h3> <div id="id_show"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="wrap2"> <h3> Epreuve Théorique Générale (ETG) <a href="#id_show_2" class="formations">+</button></h3> <div id="id_show_2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>
agrafik, il y a 7 ans

Bonjour, merci pour ta réponse super rapide :)

Dans ta solution ça veut dire que je dois écrire plusieurs fois le code JS pour document.getElementById pour chaque ID du coup ? Pas moyen d'automatiser ce truc ? C'est pour infos personnelles surtout là :)

merci et bonne journée

Lartak, il y a 7 ans

Bonjour.
Pour commencer, il y a un problème dans ton code HTML (sans lien avec le javascript), un élément button n'a pas d'attribut href.
Ensuite, Defy a voulu t'aider, mais il t'a plutôt embrouillé, le problème en plus de ta définition d'id qui sont les mêmes, dans ton code JavaScript, tu n'utilises pas la valeur du deuxième paramêtre de la fonction, tu devrais donc plutôt avoir quelque chose comme :
Code HTML

<div class="wrap1"> <h3>Epreuve Théorique Générale (ETG) <button onclick="toggle_div(this,'hidshow');" type="button" class="formations">+</button></h3> <div id="hidshow"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <h3>Autre titre <button onclick="toggle_div(this,'hidshow_2');" type="button" class="formations">+</button></h3> <div id="hidshow_2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>

Code JavaScript

function toggle_div(button, id) { var div = document.getElementById(id); if (div.style.display == "none") { div.style.display = "block"; button.innerHTML = "-"; } else { div.style.display = "none"; button.innerHTML = "+"; } }

Résultat en live.

router Support, il y a 7 ans

I did not understand how to describe you this method, because the process is very difficult to undesratnd, thats why i suggest you to go Antivirus Chat Support for help, they told you how to solve this.