How can I hide one div before opening another?

Question

How can I make it so that only one div can be shown at a time? I've tried adding "document.getElementById(currentID).style.display='none';" in the after the else but that doesn't work.

<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('long_table')">Meeting Table</h5>

<div id="chair">
    <img src="images/1.jpg" height="300px"/>
    <h4>Product 1</h4>
</div>

<div id="table">
    <img src="images/2.jpg" height="300px"/>
    <h4>Product 2</h4>
</div>

<div id="longtable">
    <img src="images/3.jpg" height="300px"/>
    <h4>Product 3</h4>
</div>

<script type="text/javascript">
        var currentID = "";
        function showImage(id){
            if(currentID == id){
                document.getElementById(id).style.display='none';
                currentID = "";
            }else{
                document.getElementById(id).style.display='block';
                currentID = id;
            }
        }
</script>

Answer 1

Better to add a class to your HTML and then grab the divs by their class. You can then loop through the elements to hide them all and then un-hide the one you've clicked.

Example:

 var arrProducts = document.getElementsByClassName('product'); for (i = 0; i < arrProducts.length; i++) { arrProducts[i].style.display = 'none'; } function showImage(id) { for (i = 0; i < arrProducts.length; i++) { if (id == arrProducts[i].id) { if (document.getElementById(id).style.display === 'none') { arrProducts[i].style.display = 'block'; } else { arrProducts[i].style.display = 'none'; } } else { arrProducts[i].style.display = 'none'; } } } 

 h5 { cursor: pointer; } .product img { height: 10px; width: 10px; } 

 <h5 onclick="showImage('chair');">Chair</h5> <h5 onclick="showImage('table');">Table</h5> <h5 onclick="showImage('long_table');">Meeting Table</h5> <div class="product" id="chair"> <img src="images/1.jpg" height="300px" /> <h4>Product 1 (Chair)</h4> </div> <div class="product" id="table"> <img src="images/2.jpg" height="300px" /> <h4>Product 2 (Table)</h4> </div> <div class="product" id="long_table"> <img src="images/3.jpg" height="300px" /> <h4>Product 3 (Meeting Table)</h4> </div> 

Answer 2

You need to rethink the logic of your function, I'm guessing this is what you meant:

    var currentID = "";
    function showImage(id){
        if(currentID != id){
            if (currentID != "") // added this test in response to JFK's comment
                document.getElementById(currentID).style.display='none';
            document.getElementById(id).style.display='block';
            currentID = id;
        }
        else { // added after OP clarified the question
            document.getElementById(id).style.display='none';
            currentID = "";
        }
    }

Answer 3

While this won't help you fix things in you current code, you can actually do this without any JavaScript by abusing radiobuttons. This is quite common.

http://jsfiddle.net/mo7yppp8/

Each div needs a radio button above it, and to be enclosed within a label. This way, clicking on the div will trigger the radiobutton, deselecting any other div in the process.

<label>
    <input class="divSelector" type="radio" name="divSelector" value="" />
    <div>Sample text</div>
</label>

Then, all you need is some CSS to hide the radiobuttons, and some to shrink the divs which aren't right after a checked input.

.divSelector {
    display: none;
}

.divSelector:checked + div {
    font-size: 12pt;
}

div {
    font-size: 0pt;
    background-color: blue;
    color: white;
    overflow: clip;
    padding: 2em;
    height: 12px;
}

div:hover {
    background-color: grey;
}

Answer 4

If you have the chance to use jQuery, there is a really awesome solution possible. It would work like this:

http://jsfiddle.net/dnf6gsuL/2/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>



    <h5>Chair</h5>
    <div>
        <img src="images/1.jpg" height="300px"/>
        <h4>Product 1</h4>
    </div>
    <h5>Table</h5>
    <div>
        <img src="images/2.jpg" height="300px"/>
        <h4>Product 2</h4>
    </div>
    <h5 id="longtable">Meeting Table</h5>
    <div>
        <img src="images/3.jpg" height="300px"/>
        <h4>Product 3</h4>
    </div>

<script>

    $("h5").click(function(eve){
        $("div").each(function(){
            $(this).fadeOut("fast", function(){
                $(eve.target).next("div").fadeIn("fast");
            });
        });

    });
</script>

Answer 5

Try substituting longtable for long_table at "Meeting Table" h5

 var showImage = function showImage(id) { var active = document.getElementById(id); active.style.display = 'block'; var notActive = document.querySelectorAll("div:not(#" + active.id + ")"); Array.prototype.slice.call(notActive) .forEach(function(el) { el.style.display = "none"; }) }; 

 div[id] { display: none; } 

 <h5 onclick="showImage('chair')">Chair</h5> <h5 onclick="showImage('table')">Table</h5> <h5 onclick="showImage('longtable')">Meeting Table</h5> <div id="chair"> <img src="images/1.jpg" height="300px" alt="chair" /> <h4>Product 1</h4> </div> <div id="table"> <img src="images/2.jpg" height="300px" alt="table" /> <h4>Product 2</h4> </div> <div id="longtable"> <img src="images/3.jpg" height="300px" alt="meeting table" /> <h4>Product 3</h4> </div>