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 the first header expanded when page's loaded. How to make them all collapsed on page load?

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 the first header expanded when page's loaded. How to make them all collapsed on page load?

• c#
• javascript
• asp
• jquery
• css

• The ID is Accordion1. But there is some thing about script that turns the id into a longer string. Have a look in the source code when you have run the page and look at the ID there to see what it realy is. – Tyde Commented Dec 17, 2010 at 7:13
• are you sure $.accordion is supported in your server control cc1:Accordion? – Sherwin Commented Dec 17, 2010 at 7:22
• Yes! I am very sure. What cud be wrong? – Serenity Commented Dec 17, 2010 at 7:56

5 Answers 5

There is an easy fix for that - just set SelectedIndex="-1" instead of "0" (plus RequireOpenedPane="false" but it's already set in your markup).. and you really don't need that fancy onReady script.

I think your selector is wrong.

Try

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

You have to set

Accordion1.RequireOpenedPane = false;

To have them all closed. And possible set selectedIndex to -1

I think your selector is wrong:

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

This would have to go inside your page, not in an external javascript file or the <%= %> code block wont get executed.

Side note: You are using jquery notation which looks like the jquery UI accordion code but then trying to apply it to what looks like the asp Ajax Control Toolkit accordion control. If this is what you are doing then it probably wont work. However if you have the very latest version of ACT included with the Microsoft Ajax library then you could be correct here. I know that they have reimplemented all of the ACT controls to be exposed as jquery plugins but I havent used that release.

On a sidenote: When using accordion (or other js-triggered layout), you will be risking FOUC (Flash Of Unstyled Content). I would wrap the accordion control in a div, with display:none in your css and when the accordion javascript is executed, you use JQuerys show() to make it visible again. Then the accordion will be loaded and styled before it's shown.