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 im

Solution 1:

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:AccordionID="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><bstyle="color: Black">    
                <%#Eval("Ques")%> 
            </b></HeaderTemplate><ContentTemplate><p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p></ContentTemplate></cc1:Accordion>

And for CSS:

<styletype="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.