Implementing smooth div toggle
<p>I am trying to recreate the "div toggle" effect on this page, but with jQuery:</p>

<p>cordon-bleu.se</p>

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

<p>sohtanaka.com/web-design/easy-toggle-jquery-tutorial/</p>

<p>My javascript so far is:</p>

<pre><code>$(document).ready(function(){

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

});
</code></pre>

<p>These are the divs I am trying to toggle:</p>

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

<p>And this is my (relevant) css:</p>

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

.active {
 display: block;
}
</code></pre>

<p>You can see <a href="http://rutinerad.com/projekt/cb_test/" rel="nofollow">here</a> how it works right now.</p>

<p>I appreciate any help I can get.</p>
