开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜