Andere Divs ausblenden/einblenden

Question

Ich benutze den folgenden JavaScript-Code, um einige divs zu verstecken und anzuzeigen. Wenn ich auf ein Symbol klicke, wird ein div erweitert. Wenn ich auf ein anderes Symbol klicke, wird ein anderes div erweitert, aber das ursprüngliche div wird nicht geschlossen. Ich möchte es so, dass immer nur ein div geöffnet sein kann und dass die geöffneten divs geschlossen werden, wenn Sie auf ein anderes Symbol klicken.

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

Im Folgenden finden Sie einige meiner 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

landete ich es aus Bezifferung auf. Ich änderte mein Javascript zu dem unten und hielt mein HTML das selbe.

<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

Sie können diese jQuery-Skript verwenden, um Ihre div zu verbergen. : D Benötigen Sie genau für Ihre HTML-Datei? Ich könnte es für diese Datei auch schreiben, aber ich denke, dass Sie damit umgehen können.

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