使用“隐藏/显示”隐藏其他Divs

Question

I'm using the below javascript code to hide and show some divs. When I click on an icon, it expands a div. When I click on another icon, it expands another div but doesn't close the original div. I want it so that there can only be one div open at a time and that the opened divs close when you click on another icon.

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

Below is some of my 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

You can use this jQuery script to hide your div. :D Do you need exactly for your html file? I could write it for that file too but i think you can handle it.

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

Answer 2

I ended up figuring it out. I changed my javascript to the below and kept my HTML the same.

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