如何使手风琴标题最初在页面加载时折叠？

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

Answer 1

有一个简单的解决方法 - 只需设置SelectedIndex="-1"而不是“0”（加上RequireOpenedPane =“false”，但它已经在你的标记中设置）..你真的不需要那个花哨的onReady脚本。

Answer 2

I think your selector is wrong.

Try

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

Answer 3

You have to set

Accordion1.RequireOpenedPane = false;

To have them all closed. And possible 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 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.net 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.

Answer 5

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.