Accordion need to know when it collapses

Question

I'm using the Ajax Control Toolkit Accordion Version 1.0.11119.0 and I need to know when a pane colapses. Is there a client side index change event?

Answer 1

There is no client side index change event, but you can implement one take a look at this article.

<script type="text/javascript">
    var accordion;
    var handlerFired;
    function pageLoad() {

        accordion = $find("Accordion1_AccordionExtender"); //parameter should be the ID_AccordionExtender
        accordion.add_selectedIndexChanged(selectedIndexChangedHandler)
    }
    function selectedIndexChangedHandler(sender, args) {
        if (handlerFired) {
            //add this variable to prevent firing the handler twice.
            handlerFired = false;
            return;
        }

        if (confirm("Would you like to change the index from " + args._oldIndex + " to " + args._selectedIndex + "?")) {
            return;
        } else {
            handlerFired = true;
            // if we don't want to change the index, we need to set it to the old value.
            accordion.set_SelectedIndex(args._oldIndex);
        }
    }

</script>


<cc1:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelect"
        ContentCssClass="accordionContent" FadeTransitions="True" FramesPerSecond="40"
        TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="false"
        SelectedIndex="-1">
        <Panes>
            <cc1:AccordionPane ID="AccordionPane1" runat="server">
                <Header>
                    <p>
                        Header1</p>
                </Header>
                <Content>
                    <p>
                        This is the content area!</p>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane2" runat="server">
                <Header>
                    <p>
                        Header2</p>
                </Header>
                <Content>
                    <p>
                        This is the content area!</p>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="AccordionPane3" runat="server">
                <Header>
                    <p>
                        Header3</p>
                </Header>
                <Content>
                    <p>
                        This is the content area!</p>
                </Content>
            </cc1:AccordionPane>
        </Panes>
    </cc1:Accordion>