|
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
|