Change image using jQuery

Question

I have a html-page where used jquery-ui accordion. Now I have to add in this page 2 image which should vary depending on the active section. How can I do it?

HTML:

<div id="acc">
    <h1>Something</h1>
    <div>Text text text</div>
    <h1>Something too</h1>
    <div>Text2 text2 text2</div>
</div>
<div id="pic">
    <img class="change" src="1.png"/>
    <img class="change" src="2.png"/>
</div>

JS:

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            /* I'm think something need here */
        }
    });
});

Answer 1

HTML:

<div id="pic">
    <img id="change1" class="change" src="1.png"/>
    <img id="change2" class="change" src="2.png"/>
</div>

JS (I'm guessing at your conditions - assume you want a different image per displayed accordion)

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").attr("src", "new1.png");
                $("#change2").attr("src", "new2.png");
            } else if(ui.newHeader == "Another header") {
                $("#change1").attr("src", "1.png");
                $("#change2").attr("src", "2.png");
            }
        }
    });
});

If, instead, you want to toggle between the two images:

$(document).ready(function() {
    $("#acc").accordion({
        change: function(event, ui) {
            if(ui.newheader == "A header") {
                $("#change1").hide();
                $("#change2").show();
            } else if(ui.newHeader == "Another header") {
                $("#change1").show();
                $("#change2").hide();
            }
        }
    });
});