Accordion in jQuery ul

Question

I am trying to Convert one header and one content panel into an accordion.

<div id="accordion-two">
    <h3>Header</h3>
    <div>Content panel</div>
</div>

this is jQuery code

$('#accordion-two').accordion({
    header: 'h3',
    event: 'click',
    animated: 'swing',
    duration: 800, 
    active: false
});

my question is I need to apply click event to header to open the content panel and to collapse the content panel..

thank you..

Answer 1

You need to reference jQuery UI in your code:

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

Also as mentioned in the other answer by default there should always be an expanded panel so if you have only one panel it cannot be collapsed unless you toggle the collapsible option. collapsible: true

Answer 2

Pretty simple set the collapsable attribute.

$('#accordion-two').accordion(
    {
    header: 'h3', 
    event: 'click',  
    animated: 'swing', 
    duration: 800, 
    active: false,  
    collapsible: true 
    }
);​