JQuery accordion image change.

Question

0.00/5 (No votes)

See more:

Hi guys,
I am new to jquery. how can i give different image and style to my div on JQuery accordion code. i want to do when user click on Header accordion display and also header image is change to "Open". while it click header image change it shows "Close".
jQuery work fine but where and what code i write for changing image that don't know.

please help me for that. thanks in Advance.

Posted 30-Mar-11 0:25am

angle57

Add a Solution

Comments

Monjurul Habib 30-Mar-11 15:08pm

provide sample code that you tried.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

walterhevedeich · Accepted Answer · 2011-03-30T06:56:00

Solution 1

There are actually lots of ways on how you can accomplish this by using JQuery. One of which can be the following:

1. Add the images on the header sections of your accordion. Be sure to identify them by name or classes or IDS.
2. Add a click event to the Header sections of your accordion.
2. Inside the click event, you can use the hide and show methods of jQuery to show or hide the images.

$(".header_section").click(
    function(){
        $("#closeImg").hide("Blind");
        $("#openImg").show("Blind");
    }
);

Note: The code alone doesn't work. Its aim is just to give you a headstart on what you will do. You still need to tailor it for your needs.

Posted 30-Mar-11 6:56am

walterhevedeich

Comments

angle57 31-Mar-11 2:13am

thanks walterhevedeich,

According to your suggestion we applied these things but only one image is get action not all other work if i click on any else header then also first image is in action. please let me know is there any ID related issue or i need to rework on this solution.

thanks.

walterhevedeich 31-Mar-11 4:03am

Well, as I said, that code alone will not work so you need to do some modifications/enhancements. I would appreciate if you can post some of your codes and tags for me to have a better understanding on your problem.

angle57 5-Apr-11 2:56am

Hi, Thanks for help, but as per your code i changed my code and i work fine now. thanks.