Accordian: Arrow image not displaying even though image path is correct
I want the arrow-collapsed image to be displyed before accordian headers and when accordian header is clicked and expanded, arrow-collapsed image should change to arrow-expanded image. What am I doing wrong below? Also, image paths are all correct. I have checked many times.
my accordian:-
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
css
Am I giving the CSS Class names incorrectly or what ????
@denis..its still not displaying th开发者_开发知识库e images..cant find the images in Firebug either
Firstly, I would suggest to take a look at Accordion sample page which lists all available properties along with their descriptions. You'll notice that the Accordion also exposes HeaderSelectedCssClass
property - this is where you set a style for the collapsed state. So, you could re-write your markup like so:
<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250"
HeaderCssClass="accordionHeader toggler"
HeaderSelectedCssClass="accordionHeader toggler-expanded"
ContentCssClass="accordionContent">
<HeaderTemplate>
<b style="color: Black">
<%#Eval("Ques")%>
</b>
</HeaderTemplate>
<ContentTemplate>
<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>
</ContentTemplate>
</cc1:Accordion>
And for CSS:
<style type="text/css">
.accordionHeader {
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}
.toggler {
background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
}
.toggler-expanded {
background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
}
.accordionContent {
margin-top: 10px;
margin-left: 20px;
}
</style>
And please remove all those scripts.
精彩评论