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

You are correct; you need to put it in the accordion's change event.

You can change the image like this:

$('.change').attr('src', someUrl);

Answer 2

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();
            }
        }
    });
});

Answer 3

This script will show the first img for the first panel, the second img for the second panel and so on

jQuery(function($)
{

   $("#acc").accordion({
       change: function(event, ui) {
          var index = $(ui.newContent).index("#acc>div");

          $("#pic .change")
             // Hide all
             .hide()
             // Find the right image
             .eq(index)
             // Display this image
             .show();
       }
   });

});