onclick show div, but hide when other one is clicked

Question

I'm working with the code from this topic's answer #1 -- "Show a div onclick and hide the image that triggered it"

<img src="Icons/note_add.png" onclick="show('comment', this)"/>
then the function would apply a "display none" to it:

function show(target, trigger){
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
}

It works great, but I have 4 divs on a page using this onclick feature. When a user clicks on image 1, div 1 appears, but when they click on image 2 to toggle div 2, div 1 is still visible.

How can I make it so that the open div closes when another one is triggered to show? I only want one div to be open on a page, but right now, all 4 can be open.

Answer 1

METHOD 1

This can be done much easier with jQuery code.

EXAMPLE HERE

HTML

<img id="img1"/>
<img id="img2"/>
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>

JQUERY

$("#img1").on('click', function() {
   $(this).hide();
   $("#div2, #div3, #div4").hide();
   $("#div1").show();
});

Simply replace show / hide with what you want to show or hide when the img is clicked.

TOP TIP: You can also replace show/hide with toggle() or fadeIn() /fadeOut()

toggle() : Will alternate between display block and display none with each click.

fadeIn() : Will do the same as show() but with a nice fade animation.

---

METHOD 2

The new way is to use CSS animations. Tests tend to show that CSS is better on performance at handling animations than jQuery.

EXAMPLE HERE

HTML

<div id="imgWrap">
    <img id="img1" class="Active" data-box="div1"/>
    <img id="img2" data-box="div2"/>
    <img id="img3" data-box="div3"/>
    <img id="img4" data-box="div4"/>
</div>

<div id="divWrap">
    <div id="div1" class="Active">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

CSS

#divWrap div{
    opacity:0;
}
#divWrap .Active{
    opacity:1;
    -webkit-animation:fadeIn ease-in-out 0.5s;
    animation:fadeIn ease-in-out 0.5s;
}
@-webkit-keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}
@keyframes fadeIn{
    from{opacity:0;}
    to  {opacity:1;}
}

Add display:none/block along with opacity (see fiddle) if you do not want the element to reserve page space when it is not visible.

The beauty of using css is you can make the animation anything you want. This code will simply trigger the animation when the Active class is added to the element.

Here are some animation examples.

JAVASCRIPT

$('img').on('click', function () {
  var divID = $(this).attr('data-box');
  $(this).addClass('Active').siblings().removeClass('Active');
  $('#' + divID).addClass('Active').siblings().removeClass('Active');
})

Lastly add some javascript or jQuery as above to add the Active class on click. In this example Active has been hardcoded to one element in the html to create a default active element on page load.

This code also adds Active to the button clicked. This is optional but can be used to add css styling to the currently active button.