Переключить divs с помощью JQuery

Question

Я немного новичок в jquery, поэтому это должно быть простое исправление. Я просто хочу переключить divs. Когда adserver_b переключается, я скрываю сервер. Однако мне нужно, чтобы эта функция также была отменена. Поэтому, когда adserver_b виден, его можно щелкнуть, чтобы снова открыть рекламный сервер.

<script type="text/javascript"> 
$(document).ready(
function() { 
    $("#ad_server").click(function() { 
     $("#ad_serverb").fadeToggle(); 
    }); 
}); 

<div id="adserver_contain"> 
<div id="ad_server"><img src="Images/Adserver_roll.png"></div> 
</div> 

<div id="ad_serverb"><img src="Images/Adserver.png"></div> 

</div> 

Answer 1

Я установил #ad_serverb дисплей к ни так что скрыто. (Я дал блоки некоторого стиля для тестирования).

$(document).ready(function() { 
 
    $("#ad_server").click(toggleAdServers); 
 
    $("#ad_serverb").click(toggleAdServers); 
 
}); 
 

 
function toggleAdServers(){ 
 
    $("#ad_server").fadeToggle(); 
 
    $("#ad_serverb").fadeToggle(); 
 
}

#ad_server, #ad_serverb{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #00F; 
 
} 
 
#ad_serverb{ 
 
    background: #F00; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="adserver_contain"> 
 
<div id="ad_server"><img src="Images/Adserver_roll.png"></div> 
 
</div> 
 

 
<div id="ad_serverb"><img src="Images/Adserver.png"></div>

Edit: Несколько элементов

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

.toggleElements { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.first, 
 
.second { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #00F; 
 
} 
 
.second { 
 
    background: #F00; 
 
    display: none; 
 
}

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

 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div> 
 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div> 
 
<div class="toggleElements"> 
 
    <div class="first"> 
 
    <img src="Images/Adserver_roll.png"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="Images/Adserver.png"> 
 
    </div> 
 
</div>