別のものが表示されているときにdivを非表示にするにはどうすればいいですか？

Question

div .firstをいつでも非表示にしようとしています。秒は表示されます。今、私はそれらを隠すためにz-indexを使用していますが、失敗しました。どのように私はいつでも隠すことができます。秒が表示されます？

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---> 

現在の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

が、これは何が必要ですか？クリックされたアイテムの画像を表示し、他のアイテムで非表示にしますか？

$(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(); 
     }); 
     })  
    }); 
});