Реализация гладкой Див тумблер

Question

Я пытаюсь воссоздать эффект «ДИВ тумблер» на этой странице, но с JQuery:

cordon-bleu.se

Я хочу, чтобы этот эффект, но работает как выше страницы : видимый ДИВ скрывает при нажатии кнопки, чтобы показать другой:

sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

Мой Javascript до сих пор:

$(document).ready(function(){ 

$("h2.menutrigger").click(function(){ 
    $('.active').removeClass('active').slideToggle("slow"); 
    $(this).next().addClass('active').slideToggle("slow"); 
}); 

}); 

Это дивы я пытаюсь переключить:

<div class="menuitem active"> 
<img src="images/img_header.png" style="margin: 15px auto;"/> 
</div> 
<h2 class="menutrigger"><a href="#">Historia</a></h2> 
<div class="menuitem"> 
<p>Bla bla</p> 
<p>Bla Bla</p> 
</div> 
<h2 class="menutrigger"><a href="#">Spisar</a></h2> 
<div class="menuitem"> 
<p>Bla bla</p> 
</div> 

И это мой (отношение) CSS:

.menuitem { 
height: 385px; 
background-color: #000; 
display:none; 
} 

.active { 
display: block; 
} 

Вы можете увидеть here, как она работает прямо сейчас.

Я ценю любую помощь, которую я могу получить.

Answer 1

Простым решением было бы удалить оператор display: block; из вашего класса .active и позволить jQuery обрабатывать настройки дисплея для вас через slideToggle().