Swap image after jQuery Accordion Header Selection

I have a jquery accordion that I have setup with info. What I am trying to do is change an image off to the right of this accordion and the image depends on what accordion selection they selected. 开发者_JS百科I am not experienced enough with jQuery to figure this out. The link is below and you can see what it is that I am explaining here. If you have time check it out. The image to the right is the one that needs to swap out to another depending on accordion selection. Any help would be greatly appreciated.

http://luistovar.com/sandbox

Thanks in advance!

The easiest way is to write some new code, instead of adding code to your existing accordeon menu code (of course you can integrate it in your existing code for the accordeon).

Place your 4 images absolute(!) on top of each other. Because of that, you'll only see one of them. Give them a class, for instance .picture. Give each picture an ID, for instance #picture1.

Give all your a tags an ID, for instance #menu_item1.

Then use the following and jQuery.

$("#menu_item1").click(
    function(){
        $(".picture").fadeOut(200, function(){
            $("#picture1").fadeIn();
        });
    });

Copy this for each menu item/picture and adjust the numbers. There are ways which end up with less code, but in this way it's easy to comprehend.

I haven't checked it, but I hope it'll help you. It should give you a small fade effect, which you can tweak by adjusting the number 200 into a smaller or bigger number (milliseconds).

Good luck!