How can i make an image set a class to display:none and then set a specific id to display:inline

Question

I'm trying to create a function that hides a class of divs then shows one of those divs by it's id. Here is what I have but I'm not sure if this is the right way to do it. If there is a better way I'm open to it, or if someone can identify an error in this code. What I would like is for the page to load with none of the bio classes visible, then when an image is clicked the bio with the corresponding id appears in its place. Searching only gave me this answer which did not help me. The code below has the bio class divs invisible when the page loads, the image can be clicked but the div does not appear on click. Hopefully this all makes sense.

 .bio { display: none; } #id1 { display: none; } #id2 { display: none; } 

 <script language="JavaScript"> function setVisibility(name, id) { document.getElementByClassName(name).style.display = "none"; document.getElementById(id).style.display = "inline"; } </script> <input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');" ;> <input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');" ;> <div class="bio" id="id1"> <h3>text</h3> <p>more</p> </div> <div class="bio" id="id2"> <h3>text</h3> <p>more</p> 

Answer 1

Try this

<script type="text/javascript">     
    function setVisibility(name, id) {
        var x = document.getElementsByClassName(name);
        var i;
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        document.getElementById(id).style.display = "inline";
    }
</script>

<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');">
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');">

<div class="bio" id="id1">
   <h3>text</h3>
   <p>more</p>
</div>
<div class="bio" id="id2">
   <h3>text</h3>
   <p>more</p>
</div>

Answer 2

Try using the visibility property. In this case, you won't have to deal with your .bio container. You can simply focus on showing and hiding your content. See here .

Keep in mind: With your solution you're setting your containers are always visible. You may also attach a visible property to your container to not get a blank space (if you trigger your 2nd button first).

Answer 3

It's wrong way I think. Let's do so:

 function removeHidden(className) { var classes = className.split(' '); var newClasses = []; while (classes.length > 0) { var name = classes.shift(); if (name != 'hidden' && newClasses.indexOf(name) < 0) { newClasses.push(name); } } return newClasses.join(' '); } function addHidden(className) { return removeHidden(className) + ' hidden'; } function setVisibility(name, id) { var x = document.getElementsByClassName(name); var i; for (i = 0; i < x.length; i++) { if (x[i].id == id) { x[i].className = removeHidden(x[i].className); } else { x[i].className = addHidden(x[i].className); } } } setVisibility('bio', 'id1'); 

 .bio { /* don't put here display: none */ /* you can delete it if you have no other styles */ } .hidden { display: none; } 

 <input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id1');" ;> <input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id2');" ;> <div class="bio" id="id1"> <h3>FIRST DESCRIPTION</h3> <p>description description description description description</p> </div> <div class="bio" id="id2"> <h3>SECOND DESCRIPTION</h3> <p>description description description description description</p> </div>