Fermer bloc au click pour ouvrir un autre bloc

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") {

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?

  <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

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

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.

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...

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();
  }
}

SUPER CA MARCHE.

un petit detail: quand je ferme un DIV le bouton reste sur "Masquer" au lieu d'indiquer "afficher"