jQuery Accordion problem

Question

HI all.

I have this very simple code for simple accordion.

$('div.header').click(function() {
            $('div.content').slideUp('normal');
            $(this).next().slideDown('normal');
        }); $("div.content").hide();

HTML

<div class="header">Header</div>
<div class="content">Content... </div>

So whenever header is being click content expands.

the problem is that when I click on the same header content slides up and going back down.

I'm not sure how to sort this out.

Any help much appreciated.

Thank you in advance

Dom

Answer 1

use slideToggle()

$('div.header').click(function() {
        $(this).next().slideToggle('normal');
    }); $("div.content").hide();

http://api.jquery.com/slideToggle/

Answer 2

You could determine if the content is already visible before sliding using

if ((object-you-want-to-check).is(':visible') )