Hi All,
I have a Dropdownlist and an ajax accordion as stated below.
<asp:DropDownList ID="ddlstPatientCategory" runat="server" Height="20px" Style="font-family: Arial" Width="246px">
<asp:ListItem Value="1">Pane 1</asp:ListItem>
<asp:ListItem Value="2">Pane 2 </asp:ListItem>
<asp:ListItem Value="3">Pane 3</asp:ListItem>
</asp:DropDownList>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
1. <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head runat="server">
5. <title>Simple Accordion</title>
6. <style type="text/css">
7. .accordion {
8. width: 400px
9. }
10.
11. .accordionHeader {
12. border: 1px solid #2F4F4F
13. color: white
14. background-color: #2E4d7B
15. font-family: Arial, Sans-Serif
16. font-size: 12px
17. font-weight: bold
18. padding: 5px
19. margin-top: 5px
20. cursor: pointer
21. }
22.
23. .accordionHeaderSelected {
24. border: 1px solid #2F4F4F
25. color: white
26. background-color: #5078B3
27. font-family: Arial, Sans-Serif
28. font-size: 12px
29. font-weight: bold
30. padding: 5px
31. margin-top: 5px
32. cursor: pointer
33. }
34.
35. .accordionContent {
36. background-color: #D3DEEF
37. border: 1px dashed #2F4F4F
38. border-top: none
39. padding: 5px
40. padding-top: 10px
41. }
42. </style>
43.
44. </head>
45. <body>
46. <form id="form1" runat="server">
47. <div>
48.
49. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
50. </asp:ToolkitScriptManager>
51.
52. <asp:Accordion
53. ID="Accordion1"
54. CssClass="accordion"
55. HeaderCssClass="accordionHeader"
56. HeaderSelectedCssClass="accordionHeaderSelected"
57. ContentCssClass="accordionContent"
58. runat="server">
59. <Panes>
60. <asp:AccordionPane ID="AccordionPane1" runat="server">
61. <Header>Pane 1</Header>
62. <Content>
63. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
64. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
65. Pellentesque habitant morbi tristique senectus et netus et.
66. </Content>
67. </asp:AccordionPane>
68. <asp:AccordionPane ID="AccordionPane2" runat="server">
69. <Header>Pane 2</Header>
70. <Content>
71. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
72. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
73. Pellentesque habitant morbi tristique senectus et netus et.
74. </Content>
75. </asp:AccordionPane>
76. <asp:AccordionPane ID="AccordionPane3" runat="server">
77. <Header>Pane 3</Header>
78. <Content>
79. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
80. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
81. Pellentesque habitant morbi tristique senectus et netus et.
82. </Content>
83. </asp:AccordionPane>
84. </Panes>
85. </asp:Accordion>
86.
87. </div>
88. </form>
89. </body>
90. </html>
Now when ever i select a specific Pane Heading (Eg:Pane1,Pane2 or Pane3) in dropdownlist, it should enable only that particular Pane in accordion. Rest all Panes should be disabled.
How to Code this?
Thank You
↧
How to select accordion pane based on dropdownlist selection
↧