I am facing the exact same issue I had last week.
Here is an example of my HTML code:
<article class="tickets">
<div class="grid_12 left">
<div class="header">
<i class="icon-pushpin"></i>
Neue Tickets
<div class="count right"><span>6</span></div>
</div>
<div class="messages">
<div class="msg">
<div class="dreieck prio_a"></div>
<div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
<div class="autor">Lars</div>
<small class="subject">Test</small>
</div>
<div class="msg">
<div class="dreieck prio_a"></div>
<div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
<div class="autor">Lars</div>
<small class="subject">Test</small>
</div>
<div class="msg">
<div class="dreieck prio_a"></div>
<div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
<div class="autor">Lars</div>
<small class="subject">Test</small>
</div>
<div class="msg">
<div class="dreieck prio_a"></div>
<div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
<div class="autor">Lars</div>
<small class="subject">Test</small>
</div>
<div class="msg">
<div class="dreieck prio_a"></div>
<div class="ava right"><img src="http://lorempixel.com/40/40/" alt="Test"></div>
<div class="autor">Lars</div>
<small class="subject">Test</small>
</div>
<div class="msg">
<div...
<p>and here is the jQuery part:</p>
<pre><code>$('.header').click(function(e) {
$(this).siblings('.messages').slideDown(500);
$(this).next().slideUp('normal');
e.preventDefault();
});
The first menu slides down and up, while the second menu only slides down. I want the first menu to slideDown when clicked on the "header" and then slideUp again upon another click. If the first menu is open and I click on the second one, the first should slideUp and the second should slide down. Can anyone help me identify what might be wrong with my code?