I am sure this has come up - is there a way to add indicators on the accordian panel headers link we have on the collapse panel ?
Hi Codegalaxy,
Yes , as far as I know, we can do it by using Javascript. Here is my sample with shows how to hide a Panel when click on the Button.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Accordion</title> <style> .accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } .accordionLink { background-color: #D3DEEF; color: white: } </style></head><body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" /> <div> <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Acc" Text="Accord1" onclick="chageAccordion()"/><asp:RadioButton ID="RadioButton2" runat="server" GroupName="Acc" Text="Accord2" onclick="chageAccordion()"/> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" SuppressHeaderPostbacks="true" > <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" > <Header> Panel1</Header> <Content> PanelContent1</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> Panel2</Header> <Content> PanelContent2</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header> Panel3</Header> <Content> PanelContent3</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> <input id="Button1" type="button" value="button" onclick="hidePanel()"/> <script type="text/javascript" language="javascript"> var accordion; function chageAccordion(){ if(accordion==null) accordion = $find('MyAccordion_AccordionExtender'); if($get("<%= RadioButton1.ClientID%>").checked){ accordion.set_SelectedIndex(0); } else{ accordion.set_SelectedIndex(1); } } function hidePanel(){$find('MyAccordion_AccordionExtender').get_Pane(0).header.style.display="none"; //add your HTML Code here. $find('MyAccordion_AccordionExtender').get_Pane(0).content.style.display="none"; $find('MyAccordion_AccordionExtender').set_SelectedIndex(1); } </script> </div> </form></body></html>Please pay your attention to the Bold part. You can do some similar things here.
I hope this help.
Best regards,
Jonathan
No comments:
Post a Comment