Question

I need to swap the image while clicking the div tag Here is my code

<div class="accordionButton" style="border-style: none; border-color: #3399FF; background-color: #66CCFF;">
<img alt=""  class="img-swap" src="../../Content/ss_up.jpg" style="height: 19px; width: 21px" />Customer &amp; Catogory Parameters
</div>

<div class="accordionContent" style="border-style: none; border-color: #FFFFFF;">
Customer group *:
<input type="text" id="Text1" />
<a href="#link" style="color: #3399FF">Search</a> Product group * :
<input  type="text" id="Text3" />
<a href="#link1" style="color: #3399FF">Search</a> 
<input type="button" id="Button1" value="Go" style="background-color: #3399FF; width: 42px; margin-left: 0px;" />
</div>

and

    $(document).ready(function () {

        //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
        $('.accordionButton').click(function () {

            //REMOVE THE ON CLASS FROM ALL BUTTONS
            $('.accordionButton').removeClass('on');

            //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
            $('.accordionContent').slideUp('normal');

            //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
            if ($(this).next().is(':hidden') == true) {

                //ADD THE ON CLASS TO THE BUTTON
                $(this).addClass('on');

                //OPEN THE SLIDE
                $(this).next().slideDown('normal');
            }
 });

while clicking the image swapping works

$('.img-swap').click(function () {
        if ($(this).attr("class") == "img-swap") {
            this.src = this.src.replace("_up", "_down");
        }
        else {
            this.src = this.src.replace("_down", "_up");
        }
        $(this).toggleClass("down");
    });

    $('.accordionContent').hide();
}); 

but i need to swap that image while clicking the div and i have tried like this

$(document).ready(function () {

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function () {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.accordionContent').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if ($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
        }


        if ($('.img-swap').attr("class") == "img-swap") {
            $('.img-swap').src = $('.img-swap').src.replace("Content/Images/arrow.jpg", "Content/Images/arrow_down.jpg");
        }
        else {
            $('.img-swap').src = $('.img-swap').src.replace("Content/Images/arrow_down.jpg", "Content/Images/arrow.jpg");
        }
        $('.img-swap').toggleClass("arrow_down");

    });

But still it is not working..Any suggestion?

Answer 1

i’d do

$('.img-swap').click(function() {
    //check if it has the class down
    if ($(this).hasClass("down")) {
        //if it has it, use replace down with up
        this.src = $(this).attr('src').replace("_down", "_up");
    } else {
        this.src = $(this).attr('src').replace("_up", "_down");
    }
    $(this).toggleClass("down");
});

fiddle here (look in firebug, the behaviour is correct) http://jsfiddle.net/w3c35/

P.S. i use this.src only lefthand because this.src return the full address (http://jsfiddle.net/Content/ss_up) while $(this).attr('src') return ../../Content/ss_up.jpg

To swap on the click of div.accordionButton

$(document).ready(function () {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function () {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.accordionContent').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if ($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
    }

   var $img = $('img', this);
   if ($img.hasClass("down")) {
        //if it has it, use replace down with up
        $img.attr('src', $img.attr('src').replace("_down", "_up"));
    } else {
        $img.attr('src', $img.attr('src').replace("_up", "_down"));
    }
    $img.toggleClass("down");

});