How to swap the image while clicking the div in Jquery?
<p>I need to swap the image while clicking the div tag Here is my code</p>

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

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

<p>and</p>

<pre><code>    $(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');
            }
 });
</code></pre>

<p>while clicking the image swapping works</p>

<pre><code>$('.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();
}); 
</code></pre>

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

<pre><code>$(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");

    });
</code></pre>

<p>But still it is not working..Any suggestion?</p>
