how to open a particular panel in ajax accordion programmatically by jquery : The Official Microsoft ASP.NET Forums

Reply

akhillal

Member

5 Points

12 Posts

how to open a particular panel in ajax accordion programmatically by jquery

Feb 26, 2013 02:07 PM|LINK

Hi ,

i am using ajax accordion. i have 5 accordionpanels inside an accordion, i have few validation controls for some input controls inside these panels. when the validation control is enabled i need to show that particular panel . How can i do this through this by jquery.

Thanks ,

Reply

asawaf

Member

340 Points

70 Posts

Re: how to open a particular panel in ajax accordion programmatically by jquery

Feb 26, 2013 09:23 PM|LINK

Although this is a server side code, hope it helps:

I execute this function on each page load to open the appropriate accordian pane using its ID.

Public Sub OpenAccordian(AccordianPaneID As String)
        Dim NavigationUserControl As UserControl = Me.FindControl("NavigationToolbar_Main")
        Dim MasterPageMenu As AjaxControlToolkit.Accordion = NavigationUserControl.FindControl("Accordion_Navigation")
        'Dim MasterPageMenu As AjaxControlToolkit.Accordion = Me.FindControl("Accordion_Navigation")
        Dim CurrentIndex As Integer = 0
        For Each P As AjaxControlToolkit.AccordionPane In MasterPageMenu.Panes
            If P.ID = AccordianPaneID Then
                MasterPageMenu.SelectedIndex = CurrentIndex
                Exit For
            Else
                If P.Visible = True Then
                    CurrentIndex = CurrentIndex + 1
                End If
            End If
        Next
    End Sub

Ahmed F. El Sawaf

Please mark as "Answer" if this helped you.

Edited by asawaf on Feb 26, 2013 09:23 PM
Edited by asawaf on Feb 26, 2013 09:24 PM
Edited by asawaf on Feb 26, 2013 09:24 PM
Edited by asawaf on Feb 26, 2013 09:25 PM

Reply

Danny117

Star

11160 Points

1932 Posts

Re: how to open a particular panel in ajax accordion programmatically by jquery

Feb 26, 2013 09:57 PM|LINK

Here's a javascript which in jquery you would substitue $find for document.getElementById.

The button opens the first pane by simply clicking on it javascript.

<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager runat="server" ></asp:ToolkitScriptManager>
    <div>


        <input id="Button1" type="button" value="Click pane 1"
            onclick="document.getElementById('AccordionPane1_header').click();"/>
            
            
        <asp:Accordion ID="Accordion1" runat="server">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server" ClientIDMode="Static">
                    <Header>1</Header>
                    <Content>a</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server" ClientIDMode="Static">
                    <Header>2</Header>
                    <Content>a</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server" ClientIDMode="Static">
                    <Header>3</Header>
                    <Content>a</Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>



    </div>
    </form>
</body>
</html>

Good Luck

Me on linked in