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');
     });
 });

Isn't his a basic accordion that you're after?

j08691
– j08691

2013-07-02 13:53:20 +00:00
Commented Jul 2, 2013 at 13:53 — j08691
– j08691, Commented Jul 2, 2013 at 13:53
@j08691 yes if that is the correct term for it

NewKidOnTheBlock
– NewKidOnTheBlock

2013-07-02 13:54:39 +00:00
Commented Jul 2, 2013 at 13:54 — NewKidOnTheBlock
– NewKidOnTheBlock, Commented Jul 2, 2013 at 13:54

Ionică Bizău · Accepted Answer · 2013-07-02 14:01:52Z

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

answered Jul 2, 2013 at 14:01

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ionică Bizău Over a year ago

@NewKidOnTheBlock Yes, me too. Don't forget to mark it if you consider the correct answer.

Claudio Redi · Accepted Answer · 2013-07-02 13:58:20Z

1

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

answered Jul 2, 2013 at 13:58

Claudio Redi

68.6k15 gold badges138 silver badges161 bronze badges

Comments

Raj Nathani · Accepted Answer · 2013-07-02 13:58:11Z

0

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');
         }
         });
     });

answered Jul 2, 2013 at 13:58

Raj Nathani

2,8551 gold badge22 silver badges20 bronze badges

1 Comment

Raj Nathani Over a year ago

in the rush of having your question answered first i didn't think of using .slideToggle and .toggleClass, the code above will still do the job perfectly, however for shorter code please look at Claudio Redi's answer :)

Collectives™ on Stack Overflow

jquery Show and hide menu issue

HTML

Javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related