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

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>