Ajouter hide pour tous les autres boutons dans les fonctions jQuery

Question

Quelqu'un pourrait m'aider s'il vous plaît à ajouter la commande hide pour tous les autres boutons, dans cette fonction. Parce que dans cette fonction je peux mettre plusieurs boutons sur la même page sans avoir à deuter la fonction.

var d = document; 
 
function trclick(a){ 
 
    var b=a.id,view,valbt; 
 
    var c=$("#bd_"+b); 
 
    var e=d.getElementById('nod_'+b); 
 
    view=c.css('display'); 
 
    c.toggle('slow'); 
 
    valbt=(view=='none'?'[-]':'[+]'); 
 
    e.innerHTML=valbt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<center> 
 
    <button id="look1" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span id="nod_look1">[+]</span>Look1</button> 
 
    <div id="bd_look1" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div><br /> 
 
    
 
    <button id="look2" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span id="nod_look2">[+]</span>Look2</button> 
 
    <div id="bd_look2" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div><br /> 
 
    
 
    <button id="look3" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span id="nod_look3">[+]</span>Look3</button> 
 
    <div id="bd_look3" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div> 
 
</center>

Answer 1

Ajouter une classe (Ex: "bd") pour les divs de contenu et de toujours les cacher avant de montrer l'actuel. La même chose pour les plages [+]/[-].

var d = document; 
 
function trclick(a){ 
 
    var b=a.id,view,valbt; 
 
    var c=$("#bd_"+b); 
 
    $(".bd").hide(100); //hide all first 
 
    $(".nod").html('[+]'); //reset labels to [+] 
 
    c.toggle('slow'); //it could be c.show('slow') 
 
    $("#nod_"+b).html('[-]'); //current label to [-] 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<center> 
 
    <button id="look1" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span class="nod" id="nod_look1">[+]</span>Look1</button> 
 
    <div id="bd_look1" class="bd" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div><br /> 
 
    
 
    <button id="look2" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span class="nod" id="nod_look2">[+]</span>Look2</button> 
 
    <div id="bd_look2" class="bd" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div><br /> 
 
    
 
    <button id="look3" onclick="trclick(this);" style="font-size: 11px; cursor: pointer;"><span class="nod" id="nod_look3">[+]</span>Look3</button> 
 
    <div id="bd_look3" class="bd" style="border: 0px inset; margin: 0px; padding: 6px; display: none;"> 
 
    HELLO 
 
    </div> 
 
</center>