I am having trouble finding a way to toggle the css class of a span tag within my Ajax Accordion header.
The goal is to change the class of the span tag in the header based on whether the header is selected or not, switching between a plus icon and a minus icon. Below is the code for the Accordion Section. I haven't attempted to create any JS or jQuery script yet.
<asp:Accordion
ID="Accordion1"
CssClass="accordion"
HeaderCssClass="acc_Header"
HeaderSelectedCssClass="acc_HeaderSelected"
ContentCssClass="accordionContent"
AutoSize ="none"
RequireOpenedPane="false"
FadeTransitions ="true"
TransitionDureation="250"
FramesPerSecond="40"
SelectedIndex="-1"
SuppressHeaderPostBack ="true"
runat="server">
<Panes>
<asp:AccordionPane ID="SubsidencePane1" runat="server">
<Header><span class="icon-plus-circle"></span>What is the definition of subsidence?</Header>
<Content>
<p>This is where the ground beneath a structure has suffered downward movement, causing damage to the property.</p>
<p>The movement of the ground is a consequence of some activity in the ground unconnected with the weight or presence of the building.</p>
<p>The damage that normally occurs in properties suffering from subsidence is cracking in the walls; these cracks can be diagonally, vertical or horizontal.</p>
<p>However not all cracking is attributable to subsidence therefore a specialist surveyor is often called upon to determine the cause of the cracking to ensure the cause falls under the definition of subsidence.</p>
</Content>
</asp:AccordionPane>