I am setting up a "bio" section on my site and I have 3 images of employees and 3 divs with each of the employees bios below. I want to hide all the bios by default and then display only the div associated with the image that is clicked and hide all other divs.

Currently it seems like it's not finding the elements because I am getting "undefined"

Here is my HTML so far:

<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

And my Javascript:

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

Any ideas? Thanks!

Use a regular for loop as a for in loop will loop over the other properties of the NodeList and not just over the list of elements

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var i=0;i<divs.length;i++) {
            divs[i].style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

When using for(var div in divs), div is not the element. This notation is used when iterating JSON objects.

You want to use this instead:

for(var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
}

    try this, it is a working code 
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .share-list {
            display:none;
        }
        </style>
        </head>
        <body>

        <div onclick="shareListHideShow('t1')">
        temp1
            <div class="share-list" id="t1">t1</div>
        </div>
        <div onclick="shareListHideShow('t2')">
        temp2
            <div class="share-list" id="t2">t2</div>
        </div>
        <div onclick="shareListHideShow('t3')">
        temp3
            <div class="share-list" id="t3">t3</div>
        </div>
        <div onclick="shareListHideShow('t4')">
        temp4
            <div class="share-list" id="t4">t4</div>
        </div>
        <div onclick="shareListHideShow('t5')">
        temp5
            <div class="share-list" id="t5">t5</div>
        </div>

        <div id="out"></div>

        <script>
        //window.onload = myfunc();
        function shareListHideShow(actionId){
            var divs = document.getElementsByClassName("share-list");
            for(var i=0;i<divs.length;i++) {
                if(divs[i].id == actionId){
                    if(divs[i].style.display === "block"){
                        divs[i].style.display = "none";
                    }else{
                        divs[i].style.display = "block";
                    }
                }
                else
                    divs[i].style.display = "none";
            }
        }
        </script>
</body>
</html>

来源：https://stackoverflow.com/questions/22465919/show-1-div-and-hide-all-others-on-click-using-javascript

标签

javascript

onclick

hide

Show 1 div and hide all others on click using Javascript

JSFiddle