Question

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>

Answer 1

Change:

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

to be

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