Fermer bloc au click pour ouvrir un autre bloc
Fermémont_dani Messages postés 232 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 7 mai 2024 - 12 déc. 2022 à 07:47
- Fermer bloc au click pour ouvrir un autre bloc
- Comment ouvrir un fichier epub ? - Guide
- Bloc note windows - Télécharger - Traitement de texte
- Ouvrir un fichier .bin - Guide
- Comment ouvrir un fichier docx ? - Guide
- Bloc note gratuit - Télécharger - Agendas & Calendriers
8 réponses
Modifié le 11 déc. 2022 à 17:43
Bonjour,
Tu ajoutes une "class" à tes div et tu les masques toutes avant d'afficher celle que tu veux.
<div id="a_manipuler2020" class="peuimporte" style="display: none; margin:5%;">
function affichManipul(chaine_caratere){ //on masque toutes les divs var divs = document.querySelectorAll(".peuimporte");// il manquait un point [].forEach.call(divs, function(div) { // do whatever div.style.display= "none"; }); //la suite de ton code... if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") {
11 déc. 2022 à 16:41
Merci Jordane pour ta réponse.
J'ai bien compris comment tu procède mais cela ne focntionne pas et mes notions de JS sont tres limitées pour apporté un complément ou une correction.
Aurais-tu une suggestion?
11 déc. 2022 à 17:23
Comme à chaque fois .... montre nous le code que tu as modifié afin que l'on puisse voir où tu se trouve l'éventuelle erreur
Pense aussi à regarder dans la console du navigateur si il n'y aurait pas des messages d'erreur pouvant expliquer le souci.
11 déc. 2022 à 17:39
<div class="libro"> <div class="libronombre"><b>titre</b> </div> <p id="texte_court2020" style="padding: 10px;">pour le texte court</p> <div id="a_manipuler2020" class="invisible" style="display: none; margin:5%;"> ici l'ìnfo complete </div> <div align="center"> <button class="button_libro" style="align: center;"id="toaffich2020" onclick="affichManipul(2020)"><?php echo $vermas;?></button> <br><br> </div> </div> <div class="libro"> <div class="libronombre"><b>titre 2</b> </div> <p id="texte_court2022" style="padding: 10px;">pour le texte court info 2</p> <div id="a_manipuler2022" class="invisible" style="display: none; margin:5%;"> ici l'ìnfo 2 complete </div> <div align="center"> <button class="button_libro" style="align: center;"id="toaffich2022" onclick="affichManipul(2022)"><?php echo $vermas;?></button> <br><br> </div> </div>
et le JS
function affichManipul(chaine_caratere){ //on masque toutes les divs var divs = document.querySelectorAll("invisible"); [].forEach.call(divs, function(div) { // do whatever div.style.display= "none"; }); if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") { document.getElementById('a_manipuler'+chaine_caratere).style.display = "block"; document.getElementById('texte_court'+chaine_caratere).style.display = "none"; document.getElementById('toaffich'+chaine_caratere).innerHTML = "<?php echo $volver; ?>"; } else { document.getElementById('a_manipuler'+chaine_caratere).style.display = "none"; document.getElementById('texte_court'+chaine_caratere).style.display = "block"; document.getElementById('toaffich'+chaine_caratere).innerHTML = "<?php echo $vermas; ?>"; } }
Et bien sur j'avais jeter un coup d'oeil sur la console et il n'y a pas de message d'erreur
11 déc. 2022 à 17:42
C'est de ma faute j'ai oublié un point
var divs = document.querySelectorAll(".invisible"); [].forEach.call(divs, function(div) {
11 déc. 2022 à 17:59
Super. Ne t'inquiette pas, pour moi "seulement ceux qui ne font rien ne risquent pas de se tromper" et pour cela l'erreur est humaine.
Merci
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question11 déc. 2022 à 18:51
Oups j'ai été trop vite.
Quand je clique sur le bouton pour fermer, cela ne fonctionne plus. Pour fermer je suis obligé de cliquer pour ouvrir un autre bloc.
11 déc. 2022 à 20:19
Aie Aie le premier bloc reste ouvert après ouverture du second bloc et quand je clique sur "fermer" tout se ferme.
function affichManipul(chaine_caratere){ if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") { document.getElementById('a_manipuler'+chaine_caratere).style.display = "block"; document.getElementById('texte_court'+chaine_caratere).style.display = "none"; document.getElementById('toaffich'+chaine_caratere).innerHTML = "<?php echo $volver; ?>"; } else { //on masque toutes les divs var divs = document.querySelectorAll(".invisible"); [].forEach.call(divs, function(div) { // do whatever div.style.display= "none"; }); document.getElementById('a_manipuler'+chaine_caratere).style.display = "none"; document.getElementById('texte_court'+chaine_caratere).style.display = "block"; document.getElementById('toaffich'+chaine_caratere).innerHTML = "<?php echo $vermas; ?>"; } }
Ce n'est peut être pas possible de fermer le bloc actif en cliquant sur "ouvrir" un autre bloc et aussi de pouvoir fermer le bloc actif en cliquant sur "fermer" sans avoir a ouvrir un autre bloc...
11 déc. 2022 à 20:21
Correction ( testée cette fois )
function hideAllBlocks(){ //on masque toutes les divs var divs = document.querySelectorAll(".invisible"); [].forEach.call(divs, function(div) { // do whatever console.log('On masque la div', div.id); div.style.display= "none"; }); // et on met le text "afficher" sur tous les boutons var btns = document.querySelectorAll(".invisible> div > button "); [].forEach.call(btns, function(btn) { console.log("On modifie le text du bouton :", btn.id); btn.innerHTML = "Afficher"; }); } function affichManipul(chaine_caratere){ console.log('DIV',chaine_caratere, document.getElementById('a_manipuler'+chaine_caratere).style.display); if( document.getElementById('a_manipuler'+chaine_caratere).style.display == 'none'){ hideAllBlocks(); //on affiche la div voulue document.getElementById('a_manipuler'+chaine_caratere).style.display = 'block'; //on met le texte "Masquer" sur le bouton correspondant document.getElementById('toaffich'+chaine_caratere).innerHTML = "Masquer"; }else{ hideAllBlocks(); } }
12 déc. 2022 à 07:47
SUPER CA MARCHE.
un petit detail: quand je ferme un DIV le bouton reste sur "Masquer" au lieu d'indiquer "afficher"