My ASP.NET Accordion will not animate panel changes when triggered by check boxes.

Question

My accordion panel in markup:

<ajaxToolkit:Accordion 
ID="MyAccordion"
runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
    <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
        <Header>BBBBBBBBBB</Header>
        <Content>
        FFFFFFFF:<br /><br />
        <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
            <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
        </td><td width="300">
            <asp:CheckBox ID="CB_Verification0" runat="server" AutoPostBack="true" /> Verify
        </td></tr>
        </table>
        </Content>

    </ajaxToolkit:AccordionPane>

    <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
        <Header>GGGGGGGGG</Header>
        <Content>
        HHHHHHHHHH:<br /><br />
            <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
            </td><td width="300">
                <asp:CheckBox ID="CB_Verification1" runat="server" AutoPostBack="true" /> Verify
            </td></tr>
            </table>
        </Content>
    </ajaxToolkit:AccordionPane>
</Panes>            

Here's how I handle the checkbox check:

Private Sub CB_Verification0_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CB_Verification0.CheckedChanged
    MyAccordion.SelectedIndex = 1
End Sub

I'm causing the panels to change correctly, it's just that they don't animate like they do when I click the headers. When I click the checkbox to change the panel, the panel just disappears instantly and the new one appears instantly, but I want it to be animated as if I clicked the headers. Is there a way to cause the animation to happen when force changing the visible panel?

Answer 1

This is beacuse you are changing the panel on the server side, so the page is sent to the client with the panel already expanded. You could register a script on your postback to trigger the change on the client side.

Take a look at this Blog

Answer 2

You can do this.. all client side, your problem is, when it is posting back, it is refreshing back to first one.. so you have to turn off AutoPost back.. here is sample that works..

<script language="javascript" type="text/javascript">

    function toggle(id) {
        var accordion = $get("<%= MyAccordion.ClientID%>");
        accordion.AccordionBehavior.set_SelectedIndex(id);

    }
</script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
        AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
        RequireOpenedPane="false" SuppressHeaderPostbacks="true">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
                <Header>
                    BBBBBBBBBB</Header>
                <Content>
                    FFFFFFFF:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox1" type="checkbox" onclick="javascript:toggle(1);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
                <Header>
                    GGGGGGGGG</Header>
                <Content>
                    HHHHHHHHHH:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox2" type="checkbox" onclick="javascript:toggle(0);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
    </ajaxToolkit:Accordion>

Answer 3

Or see: http://stackoverflow.com/questions/1902973/horizontal-and-vertical-accordion

for a complete asp.net example code