非表示の他のディビジョンを非表示

Question

いくつかのdivを非表示にするには、以下のjavascriptコードを使用しています。アイコンをクリックすると、divが展開されます。別のアイコンをクリックすると、別のdivが展開されますが、元のdivは閉じられません。一度に1つのdivしか開くことができないようにし、別のアイコンをクリックすると開いたdivが閉じられるようにします。以下は

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

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

私はそれを考え出すことになりました。私はJavaScriptを以下に変更し、HTMLを同じにしました。

<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

あなたのdiv要素を非表示にするには、このjQueryのスクリプトを使用することができます。 ：Dあなたはあなたのhtmlファイルに正確に必要ですか？私はそのファイルのためにそれを書くこともできますが、私はあなたがそれを扱うことができると思います。

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