In this article we will explore how to enable and disable Accordion control in Ajaxcontroltoolkit using javascript.
Let's start writing code.
Step 1: Add reference Ajaxcontroltoolkit.dll and register it in aspx page.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
Step 2: Add scriptmanager inside the form tag.
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1"/>
Step 3: Add accodrion control with four panes.
<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> 1. Accordion One </Header> <Content> First Accordion Content </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> 2. Accordion Two </Header> <Content> Second Accordion Content </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header> 3. Accordion Three </Header> <Content> Third Accordion Content </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server"> <Header> 4. Accordion Four </Header> <Content> Fourth Accordion Content </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion>
Step 4: Add two buttons, one to enable accordion controls another to disable accordion controls. Disable and Enable javascript method will be invoked by btnDisale and btnEnable respectively.
<asp:Button ID="btnDisable" runat="server" Text="Disable" OnClientClick="return Disable();" /> <asp:Button ID="btnEnable" runat="server" Text="Enable" OnClientClick="return Enable();" />
Step 5: Add Enable and Disable javascript method.
<script language="javascript" type="text/javascript"> function Disable() { var acc; var header; acc = $get('<%=MyAccordion.ClientID%>'); var paneCount = acc.AccordionBehavior._panes.length; for (index = 0; index < paneCount; index++) { header = acc.AccordionBehavior.get_Pane(index).header; $removeHandler(header, "click", acc.AccordionBehavior._headerClickHandler); } return false; }
function Enable() { var acc; var header; acc = $get('<%=MyAccordion.ClientID%>'); var paneCount = acc.AccordionBehavior._panes.length; for (index = 0; index < paneCount; index++) { header = acc.AccordionBehavior.get_Pane(index).header; $addHandler(header, "click", acc.AccordionBehavior._headerClickHandler); } return false; }
</ script>
This ends the article of disabling accordion control using javascript.
Live Demo
|