How to set accordion to be completely collapsed when page loads

[Susie]

I am using this accordion: http://jqueryui.com/demos/accordion/#collapsible . It's working great except I'm not sure how to make it so that when you visit the page, all the items are closed until you select one to open. I don't want the first item to be open by default.

 

Any ideas? :/

[PicnicTutorials]

Hello, that site says...

 

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

[Susie]

Thanks, Eric.

 

Yes, I saw that and here's what I have in the

:

 

$(function() {

$("#accordion").accordion({

collapsible: true

});

});

 

The result is the first item is open by default. I want them all closed by default.

 

For reference, here's what I'm working on (will style the accordion once I get it working properly): http://tinyurl.com/ylefxty

[monkeysaurus]

Susie,

 

I think you're looking for:

 

[Susie]

Oh, awesome! I totally missed that. Thanks!!! :cool:

[Susie]

I have another question about this accordion. I can see that the little arrow icon is being added through the jquery ui css framework (http://jqueryui.com/docs/Theming/API), but I have no idea how to apply it to my accordion.

 

Is anyone here familiar with this?

[monkeysaurus]

I've always used Themeroller in conjunction with jQuery UI - you can tweak the look in your browser, then download the specific package you need. There are pre-rolled themes there too. Once you've done this, it's a simple case of including the stylesheet in your page and making sure the paths are correct.

 

Even if you use themeroller as a starting point, then tweak once it's in place, it's the quickest way to work with jQuery UI, for my money.

[Susie]

Thanks so much for the info. I get it now! :cool: