jquery Show and hide menu issue

Question

I am pretty new to Jquery so forgive me for the simple question. I have a created a mulitple show and hide menu, which works fine, however i want to add an extra function to it. When click on for example the blackJack 1 slots it it opens the dropdown menu. when i click on it whilst open it close the menu also. Looking at my code does anyone know how this could be achieved?

At present the current works when you click on "slot" it opens the next slot and closes the previous slot.

HTML

<div class="drop-inner slots">
    <h2>Blackjack</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>


<div class="drop-inner slots">
    <h2>Blackjack 2</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>

<div class="drop-inner slots">
    <h2>Blackjack 3</h2>
</div>

<div class="hide-me">
    <p>content goes here</p>
</div>

Javascript

$(function () {
     $('.slots').click(function () {
        var $this = $(this);
        $('.hide-me').slideUp().removeClass('active');
        $this.next('.hide-me').slideDown('slow').addClass('active');
     });
 });

Answer 1

Verify if the $next element is visible or not.

$('.slots').click(function () {

    var $this = $(this);
    var $next = $this.next('.hide-me');

    $('.hide-me').slideUp().removeClass('active');
    if ($next.css('display') !== 'none') {
        $next.slideUp('slow').removeClass('active');
    } else {
        $next.slideDown('slow').addClass('active');
    }
});

JSFIDDLE

Answer 2

This could do the trick

$(function () {
    $('.hide-me').hide();
    $('.slots').click(function () {
        var $this = $(this);
        var $thisHideMe = $this.next('.hide-me');
        $('.hide-me').not($thisHideMe).slideUp().removeClass('active');
        $thisHideMe.slideToggle('slow').toggleClass('active');
    });
});

DEMO

Answer 3

Here : http://jsfiddle.net/nexk5/1/ :)

 $(function () {
     $('.slots').click(function () {
         var $this = $(this);
         var $next_hideme = $this.next('.hide-me');
         $('.hide-me').not($next_hideme).slideUp().removeClass('active');
         if (!$next_hideme.hasClass('active')) {
             $next_hideme.slideDown('slow').addClass('active');
         } else {
             $next_hideme.slideUp('slow').removeClass('active');
         }
         });
     });