Implementing smooth div toggle

Question

I am trying to recreate the "div toggle" effect on this page, but with jQuery:

cordon-bleu.se

I want this effect, but working like the above page: the visible div hides when you click to show another:

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

My javascript so far is:

$(document).ready(function(){

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

});

These are the divs I am trying to toggle:

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

And this is my (relevant) css:

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

.active {
 display: block;
}

You can see here how it works right now.

I appreciate any help I can get.

Answer 1

Simple solution would be to remove the display: block; statement from your .active class and let jQuery handle the display setting for you via slideToggle().