Cacher les autres catégories avec Cacher/Voir

Question

J'utilise le code javascript ci-dessous pour cacher et montrer quelques divs. Quand je clique sur une icône, elle développe une div. Lorsque je clique sur une autre icône, elle agrandit une autre div mais ne ferme pas la div d'origine. Je le veux pour qu'il ne puisse y avoir qu'une div ouverte à la fois et que les divs ouverts se ferment quand on clique sur une autre icône.

<script type="text/javascript"> 
    function unhide(divID) { 
     var item = document.getElementById(divID); 
     if (item) { 
     item.className=(item.className=='hidden')?'unhidden':'hidden'; 
     } 
    } 
</script> 

<script type="text/Javascript"> 
    function hideshow(id) { 
    if (document.getElementById(id).style.display == ""){  
     document.getElementById(id).style.display = "none"; 
     } else { 
     document.getElementById(id).style.display=""; 
     }     
    } 
</script><!--javascript to hide and unhide a div--> 

Ci-dessous est une partie de mon HTML:

<div class="row" id="rowTitles"> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('foryou')"><img src="images/icon_you.png" onmouseover="this.src='images/icon_you_hover.png'" onmouseout="this.src='images/icon_you.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('foryou')">FOR YOU</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forteam')"><img src="images/icon_team.png" onmouseover="this.src='images/icon_team_hover.png'" onmouseout="this.src='images/icon_team.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forteam')">FOR YOUR TEAM</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcustomers')"><img src="images/icon_community.png" onmouseover="this.src='images/icon_community_hover.png'" onmouseout="this.src='images/icon_community.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcustomers')">FOR OUR CUSTOMERS</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
      <div class="col-sm-3"> 
       <center> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcommunity')"><img src="images/icon_network.png" onmouseover="this.src='images/icon_network_hover.png'" onmouseout="this.src='images/icon_network.png'" class="img-responsive" border="0"></a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       <div class="row" style="margin-top:1%"> 
        <div class="col-sm-12"> 
         <a href="javascript: hideshow('forcommunity')">FOR OUR COMMUNITY</a> 
        </div><!--end col-sm-12--> 
       </div><!--end row--> 
       </center> 
      </div><!--end col-sm-4--> 
     </div><!--end row--> 



<div class="descriptions"> 
    <div id="foryou" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For you!</b><br> DESCRIPTION 
     </div> 
    </div><!--end ForYou--> 
    <div id="forteam" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For your team!</b><br> DESCRIPTION 
     </div> 
    </div><!--end ForTeam--> 
    <div id="forcustomers" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For our customers!</b><br> DESCRIPTION 
    </div> 
    </div><!--end ForCommunity2--> 
    <div id="forcommunity" style="display:none;margin-top:2%"> 
     <div style="padding-top:3%"> 
     <b>For our community!</b><br> DESCRIPTION 
    </div> 
    </div><!--end ForCommunity--> 

    </div><!--end descriptions--> 

Answer 1

Je fini par le découvrir. J'ai changé mon javascript à ci-dessous et gardé mon HTML le même.

<script type="text/javascript"> 
function hideshow(d) 
{ 
var onediv = document.getElementById(d); 
var divs=['foryou','forteam','forcustomers','forcommunity']; 
for (var i=0;i<divs.length;i++) 
    { 
    if (onediv != document.getElementById(divs[i])) 
    { 
    document.getElementById(divs[i]).style.display='none'; 
    } 
    } 
onediv.style.display = 'block'; 
} 
</script> 

Answer 2

Vous pouvez utiliser ce script jQuery pour cacher votre div. : D Avez-vous besoin exactement de votre fichier html? Je pourrais aussi l'écrire pour ce fichier mais je pense que vous pouvez le gérer.

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("#hide").click(function(){ 
 
     $("div").hide(); 
 
    }); 
 
    $("#show").click(function(){ 
 
     $("div").show(); 
 
    }); 
 
}); 
 
</script> 
 
<style> 
 
img{ 
 
width: 150px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div> 
 
<img src=https://static.pexels.com/photos/53594/blue-clouds-day-fluffy-53594.jpeg> 
 
</div> 
 
<button id="hide">Hide</button> 
 
<button id="show">Show</button> 
 

 
</body> 
 
</html>