How to change image within MS Ajax Accordion control header upon mouse click

customer has requested that plus-sign / minus-sign images be used in individual accordion panel headers to indicate that the panel can be expanded or contracted.
The current ASPX code reads:
<Header><a href="" onclick="return false;"><strong>1. <em>Enable</em></strong> Access For New User</a></Header>
Am I right that this has to happen?
1.  Insert image with ID tag within the header.
2. Change the onclick event code to perform a real JavaScript function which changes the image's URL property.
3. Return false from the JavaScript function so as not to kill the normal Accordion operations.

Can anyone point me toward or supply a sample as how to make it work?

Thank you.
Richard
LVL 1
RichardKlineAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Airyck666Commented:
This might work...
Adding background image to the styles you defined for the accordion headers.

For instance, if you defined the following css classes in your accorion initialization:
    HeaderCssClass="definedAccordianHeader"
    HeaderSelectedCssClass="definedAccordianSelectedHeader"

then you could make the following additions to the styles for those two classes (see comments for more info):
.definedAccordianHeader {
    background-image: url('collapse.png'); /* Point to your minus img */
    background-repeat: no-repeat;
    background-position: 4px 7px;   /* Adjust this (x y) to fix spacing of image within the line */
    padding-left: 18px; /* Adjust this for the starting point for the text in the header */
}
 
.definedAccordianSelectedHeader {
    background-image: url('expand.png'); /* Point to your plus img */
    background-repeat: no-repeat;
    background-position: 4px 7px;   /* Adjust this (x y) to fix spacing of image within the line */
    padding-left: 18px; /* Adjust this for the starting point for the text in the header */
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RichardKlineAuthor Commented:
This worked perfectly fine!
One minor correction.  Switch the Collapse/Expand images locations.   Expand belongs with default.  Collapsed belongs with the SelectedHeader.

This CSS solution is much preferred.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.