views:

119

answers:

0

The .NET AJAX Control Toolkit's accordion control is killing me right now.

I have an accordion control, with four hard coded panes, nothing dynamic here. The panes just have 'stubbed in' HTML for now. I want the accordion to load with ALL panes collapsed. So much searching found that setting the SelectedIndex property to "-1" AND setting the RequireOpenedPane to "false" would load the control with all panes collapsed.

However, the "RequiredOpenedPane" property appears to mess with the height of how the accordion control behaves. Removing this property allows the control to load, with the first pane (index 0) expanded, and when you click on the rest of the headers, the control behaves as it should, using the AutoSize property's fill settings correctly.

Adding the "RequireOpenedPane" setting back, the control loads with all panes collapsed BUT WHEN YOU CLICK ON THE HEADERS OF EACH PANE TO EXPAND THEM, the height of the control is constrained to the height of the four closed panes. Opening the last pane, you can't even see any of the content.

All I want to do is have the control load, collapsed and work like it's supposed to. Ideas?

<cc1:Accordion ID="SeriesOptions" runat="server" 
    FadeTransitions="true"
    TransitionDuration="250" 
    FramesPerSecond="40" 
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent"
    RequireOpenedPane="false"
    SelectedIndex="-1"
    AutoSize="Fill">
    <Panes>
        <cc1:AccordionPane runat="server" ID="SeriesImagesPane" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
            <Header>
                + Add Product Images
            </Header>
            <Content>
                <br />Product Images<br /><br /><br /><br /><br /><br />
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane runat="server" ID="HighLevelComparisonTablePane" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
            <Header>
                + Create the high-level comparison table
            </Header>
            <Content>
                <br />High level comparison table<br /><br /><br /><br /><br /><br />
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane runat="server" ID="SeriesSpecificationsPane" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
            <Header>
                + Create the detailed comparison table
            </Header>
            <Content>
                <br />detailed comparison table<br /><br /><br /><br /><br /><br />
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane runat="server" ID="CustomOrderFormPane" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
            <Header>
                + Add configuration options
            </Header>
            <Content>
                <br />configuration options<br /><br /><br /><br /><br /><br />
            </Content>
        </cc1:AccordionPane>
    </Panes>
</cc1:Accordion>