How to get ajax accordion selected index from javascript

Question

Hi I have used Ajax accordion. what I need is to get current selected index when I click on accordion tab that is on billing information I should get selectedindex=0 in Javascript or in jquery

I have set javascript as

Note : billing information is a class which is set in OPCPanels

<script type="text/javascript">
    function pageLoad(sender, args) {

        $(".billinginformation").click(function (event, ui) {
            alert("hi");

            alert($(".billinginformation").accordion("option", "active"))                
        });
    }
</script>

HTML code

 <ajax:Accordion ID="OPCPanels" runat="server" SelectedIndex="0" HeaderCssClass="widget billinginformation" ContentCssClass="content" AutoSize="None">
        <Panes>
        <ajax:AccordionPane ID="BillingInformation" runat="server" CssClass="widget">
            <Header><h2>Billing Information</h2></Header>
            <Content>HI</Content>
        </ajax:AccordionPane>
        <ajax:AccordionPane ID="ShippingInformation" runat="server" CssClass="widget">
            <Header>Shipping Information</Header>
            <Content>hello</content>
        </ajax:AccordionPane>
    </Panes>
</ajax:Accordion>

I have set billinginformation class to my main accordion and on click of any accordion I get the alert of "hi".

but how should I get that which selected Index I have selected in JavaScript?

Answer 1

This appears to be the ASP.NET Ajax Toolkit accordion. Try:

$find('OPCPanels').get_SelectedIndex()

EDIT:

There's not much documentation left around on the AJAX toolkit. See what you can scrounge from these links.

Accordion SelectedIndex behind code of last item selected? http://www.dotnetcurry.com/ShowArticle.aspx?ID=215

Answer 2

Not sure how that html actually looks like in the browser, so I've chosen to use click on element with widget class: EDIT: now using CssClass

$('#OPCPanels [CssClass="widget"]').click(function (event, ui) {
     alert("Index: " + $(this).index() );
});

Answer 3

Seeing the example code ( and the source ) at http://www.newschool.edu/ajax/Accordion/Accordion.aspx , you need to use

var behavior = $find("<%=OPCPanels.ClientID%>_AccordionExtender");
alert( behavior.get_SelectedIndex() );

---

you can view the actual source code to make sure what the id of the accordion extender element is.