how to make the accordion headers all collapse initially when the page loads?

Question

I added this script on my page..it didnt work <script type="text/javascript"> $(document).ready(function(){ $("#accordion").accordion( { active: false, collapsible: true }); }); 

my accordion

 <cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250" HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler"> <HeaderTemplate> <b style="color: Black"> <%#Eval("Ques")%> </b> </HeaderTemplate> <ContentTemplate> <p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p> </ContentTemplate> </cc1:Accordion> 

I see that the first title is expanded when the page loads. How to make them all fall apart when the page loads?

Answer 1

There is a simple fix for this: just set SelectedIndex="-1" instead of "0" (plus RequireOpenedPane = "false", but it's already set in your markup) .. and you really don't need this to look like an onReady script.

Answer 2

I think your selector is wrong.

Try

 $(document).ready(function(){ $("#<%=Accordion1.ClientID %>").accordion( { active: false, collapsible: true }); }); 

Answer 3

You must install

 Accordion1.RequireOpenedPane = false; 

So that they are all closed. And it is possible to set selectedIndex to -1

Answer 4

I think your selector is wrong:

 $(document).ready(function(){ $("#<%= Accordion1.ClientID %>").accordion( { active: false, collapsible: true }); }); 

This would have to go to your page, and not to an external javascript file, otherwise the code code <% =%> will not be executed.

Side note: you use a jquery notation that looks like jQuery jQuery accordion code, but then tries to apply it to what looks like the Ajax Control Toolkit accordion control. If this is what you are doing, then probably it will not work. However, if you have the latest version of ACT included in the Microsoft Ajax library, then you may be right here. I know that they redefined all ACT controls that would appear as jquery plugins, but I did not use this release.

Answer 5

On the side: when using an accordion (or other js-triggered layout) you risk FOUC (Flash Unstyled Content). I would wrap the accordion control in a div with the display: none in your css, and when the javascript accordion is running, you use JQuerys show () to make it visible again. The accordion will then be loaded and styled before it is displayed.