I am using an AJAX Accordion for navigational purposes. Some of the items have panes that expand because they have sub menu items below them, but the rest do not have any content in the panel so they are set to not open and the pane header is just a link
to that page. I am then forcing a headerCssClass change on the panes that do not have content, to make the header appear as if it were selected like a normal Accordion pane when they are the currently opened pane. This works fine when you go from a pane that
expands to one that just has a link, because it redirects to a page and the pane is set to be closed. But when you go from a pane that has a link to one that has content accordions that expand it does not work, because it is not refreshing the page. So, is
there a way to clear the header style class when the selected index of the accordion is changed? I've tried this through JavaScript, but I wasn't able to reference the HeaderCssClass of an accordion pane. Is something like this possible through JavaScript?
Below is a small example of my code:
.aspx:
<cc1:Accordion ID="Accordion2" runat="server" ContentCssClass="accordionContent" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected">
<Panes>
<%--This pane has content that expands--%>
<cc1:AccordionPane ID="AccordionPane1" runat="server">
<Header><asp:Label ID="Label3" runat="server" Text="Student Life"></asp:Label></Header>
<Content>
<table cellpadding="0" cellspacing="0" style="width: 203px;">
<tr>
<td width="18"><img alt="" src="acc_wh_box_01.png" /></td>
<td style="background-image: url('iacc_wh_box_02.png'); background-repeat: repeat-x"></td><td width="21"><img alt="" src="acc_wh_box_03.png" /></td>
</tr>
<tr>
<td style="background-image: url('acc_wh_box_07.png'); background-repeat: repeat-y"></td>
<td bgcolor="White"><div class="accordionul">
<ul>
<li>
<asp:HyperLink ID="HyperLink2" runat="server" CssClass="cl" NavigateUrl="~/Services.aspx?v=Services - Student Life - Major Events">Major Events</asp:HyperLink></li>
<li>
<asp:HyperLink ID="HyperLink3" runat="server" CssClass="cl" NavigateUrl="~/Services.aspx?v=Services - Student Life - Societies and Clubs">Societies & Clubs</asp:HyperLink></li>
</ul>
</div>
</td>
<td style="background-image: url('acc_wh_box_09.png'); background-repeat: repeat-y">
</td>
</tr>
<tr>
<td>
<img alt="" src="acc_wh_box_10.png" />
</td>
<td style="background-image: url('acc_wh_box_11.png'); background-repeat: repeat-x">
</td>
<td>
<img alt="" src="acc_wh_box_12.png" />
</td>
</tr>
</table>
</Content>
</cc1:AccordionPane>
<%--This pane just has a link in the header, but no content--%>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header><asp:HyperLink ID="HyperLink1" runat="server" CssClass="link" NavigateUrl="Services.aspx?v=Services - Transportation Assistance and Support">Transp. Assistance & Support</asp:HyperLink></Header></cc1:AccordionPane>
</Panes>
</cc1:Accordion>
.vb: If Request.QueryString("v").ToString.Contains("Services - Transporation Assistance and Support") Then
AccordionPane3.ContentContainer.Collapsed = True
Accordion2.RequireOpenedPane = False
Accordion2.SelectedIndex = -1
AccordionPane3.HeaderCssClass = "accordionHeaderSelectedLink"
HyperLink1.CssClass = "linkactive"
End If
One option is that you can consider add "pseudo" panes that do not have content, but take the place in the Accordion. Something like a placeholder with empty content. So it can work as normal.
chockenberry
Member
9 Points
11 Posts
AJAX Accordion Change headerCssClass on index changed
May 02, 2012 06:16 PM|LINK
Hi,
I am using an AJAX Accordion for navigational purposes. Some of the items have panes that expand because they have sub menu items below them, but the rest do not have any content in the panel so they are set to not open and the pane header is just a link to that page. I am then forcing a headerCssClass change on the panes that do not have content, to make the header appear as if it were selected like a normal Accordion pane when they are the currently opened pane. This works fine when you go from a pane that expands to one that just has a link, because it redirects to a page and the pane is set to be closed. But when you go from a pane that has a link to one that has content accordions that expand it does not work, because it is not refreshing the page. So, is there a way to clear the header style class when the selected index of the accordion is changed? I've tried this through JavaScript, but I wasn't able to reference the HeaderCssClass of an accordion pane. Is something like this possible through JavaScript? Below is a small example of my code:
.aspx: <cc1:Accordion ID="Accordion2" runat="server" ContentCssClass="accordionContent" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <%--This pane has content that expands--%> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header><asp:Label ID="Label3" runat="server" Text="Student Life"></asp:Label></Header> <Content> <table cellpadding="0" cellspacing="0" style="width: 203px;"> <tr> <td width="18"><img alt="" src="acc_wh_box_01.png" /></td> <td style="background-image: url('iacc_wh_box_02.png'); background-repeat: repeat-x"></td><td width="21"><img alt="" src="acc_wh_box_03.png" /></td> </tr> <tr> <td style="background-image: url('acc_wh_box_07.png'); background-repeat: repeat-y"></td> <td bgcolor="White"><div class="accordionul"> <ul> <li> <asp:HyperLink ID="HyperLink2" runat="server" CssClass="cl" NavigateUrl="~/Services.aspx?v=Services - Student Life - Major Events">Major Events</asp:HyperLink></li> <li> <asp:HyperLink ID="HyperLink3" runat="server" CssClass="cl" NavigateUrl="~/Services.aspx?v=Services - Student Life - Societies and Clubs">Societies & Clubs</asp:HyperLink></li> </ul> </div> </td> <td style="background-image: url('acc_wh_box_09.png'); background-repeat: repeat-y"> </td> </tr> <tr> <td> <img alt="" src="acc_wh_box_10.png" /> </td> <td style="background-image: url('acc_wh_box_11.png'); background-repeat: repeat-x"> </td> <td> <img alt="" src="acc_wh_box_12.png" /> </td> </tr> </table> </Content> </cc1:AccordionPane> <%--This pane just has a link in the header, but no content--%> <cc1:AccordionPane ID="AccordionPane3" runat="server"> <Header><asp:HyperLink ID="HyperLink1" runat="server" CssClass="link" NavigateUrl="Services.aspx?v=Services - Transportation Assistance and Support">Transp. Assistance & Support</asp:HyperLink></Header></cc1:AccordionPane> </Panes> </cc1:Accordion> .vb: If Request.QueryString("v").ToString.Contains("Services - Transporation Assistance and Support") Then AccordionPane3.ContentContainer.Collapsed = True Accordion2.RequireOpenedPane = False Accordion2.SelectedIndex = -1 AccordionPane3.HeaderCssClass = "accordionHeaderSelectedLink" HyperLink1.CssClass = "linkactive" End IfThanks in advance for the help!
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: AJAX Accordion Change headerCssClass on index changed
May 04, 2012 06:49 AM|LINK
Hello
One option is that you can consider add "pseudo" panes that do not have content, but take the place in the Accordion. Something like a placeholder with empty content. So it can work as normal.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework