CODEWITHSUNDEEP
javascriptmenu
user1789437
user1789437

Reputation: 468

javascript accordion menu

I have this JavaScript code that enables a accordion menu to function, it works, kinda... When I click the link, it indeed drops down as it should, but when I click it again, it comes back up, then goes down again, not hiding as I would like. The only way to hide the element just opened, is to click the next element on the menu, then the first one will close and the second will open.. Can this be modified to make the element that is opened, close and stay closed, instead of closing and just opening right away.

Code: 

// JavaScript Document
$(document).ready(function() {

    //ACCORDION BUTTON ACTION   
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});

  <div id="wrapper">
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>        
</div>

Upvotes: 1

Views: 213

Answers (2)

ShadeTreeDeveloper
ShadeTreeDeveloper

Reputation: 1581

It could be an event bubbling issue, but without full code, it's hard to say. You might try including 'return false' at the end of your click listener to stop bubbling and ensure that no default behaviors execute.

Upvotes: 0

ylysyym
ylysyym

Reputation: 430

Change:

$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');

to be

$('div.accordionContent').not($(this).next()).slideUp('normal');
$(this).next().slideToggle();

Upvotes: 1

Related Questions