当另一个可见时如何隐藏div？

Question

I am trying to hide div .first anytime .second is visible. Right now I'm using z-index to hide them but have been unsuccessful.How can I hide .first anytime .second appears?

Website Reference

CSS

.highlight  {
opacity: 100;
z-index: -1;
}   

.second {
z-index: 1;    
}  

HTML

<div class="toggleElements">  <!---AdServer--->
<div class="first"  id="adserver_contain">
<div id="ad_server"><img class="highlight" src="Images/Adserver_roll.png"></div>
</div>


<div class="second" id="ad_serverb">
<img class="img-responsive"  src="Images/Adserver.png">
<div id="ad_serverb_text"><h1>Ad Server</h1><p>
Ad servers aggregate data and provide a centralized reporting interface. This aggregate determines what publishers sites get what inventory. AdsNative is the only truly independent ad server.</p></div>  
</div>  


</div> <!---AdServer End--->

Current Jquery

$(document).ready(function() {
  $(".toggleElements").each(function() {
    var parent = $(this);
    $(this).find(".first").click(function() {
      $(this).fadeToggle();
      $(parent).find(".second").fadeToggle();
    });
    $(this).find(".second").click(function() {
      $(this).fadeToggle();
      $(parent).find(".first").fadeToggle();
    });
  });
});

Answer 1

Is this what you need? Show image on item that is clicked and hide it in all others?

$(document).ready(function() {
    var toggleElements = $(".toggleElements"), 
        clickAbleDivs = toggleElements.find(' > div'),
        currDiv, otherDivs, img;

    $(clickAbleDivs).each(function(){
      $(this).on('click', function(){
        currDiv = $(this),      
        img = $(currDiv).find('img').show();

        otherDivs = $(clickAbleDivs).not(currDiv);
        otherDivs.each(function(){
          $(this).find('img').hide();
        });
      })      
    });
});