CODEWITHSUNDEEP
javascriptjqueryhtml
lucafj2j282j
lucafj2j282j

Reputation: 891

Change image onclick

I want to display a different image when clicking on my image. A demo is here. When clicking on the image the image should change to an arrow pointing up instead of pointing down. How do I do that?

Here is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <div id="flip"><img src="http://i.imgur.com/YCf5zYt.png"></div>
    <div id="panel" style="display: none;"><p><i><strong>CONTENT</strong></i></p>
    </div>
</td>

JS

var toggled = false;
$("img").click(function () {
    if (!toggled) {
        $(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
        toggled = true;
    } else {
        $(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
        toggled = false;
    }

    $("p").slideToggle();
})
$(document).ready(function () {
    $("#flip").click(function () {
        $("#panel").slideToggle("slow");
    });
});

Upvotes: 2

Views: 5984

Answers (6)

Dima Lukashov
Dima Lukashov

Reputation: 21

Try to write all your code in $(document).ready(); And you have a big mistake. You should use .slideToggle() for $("#panel"). And this is easier way to do it(without any variables):

    $(document).ready(function(){
    $("#flip").click(function(){
        if($("#panel").css("display") === "none"){
            $("#panel").slideToggle().css("display", "block");
            $("img").attr("src", "http://i.imgur.com/V4fKMWS.png");
    }   else if($("#panel").css("display") === "block"){
            $("#panel").slideToggle();
            $("img").attr("src", "http://i.imgur.com/YCf5zYt.png");
    }
    });
});

And demo is here

Upvotes: 1

Astaroth
Astaroth

Reputation: 783

$(document).ready(function () {
    var toggled = true;

    $("img").on('click',function () {
        if (!toggled) {
            $(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
            toggled = true;
        } else {
            $(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
            toggled = false;
        }

        $("#panel").slideToggle("slow");
    });
});

The updated fiddle: https://jsfiddle.net/sj7o9x58/3/

I don't know if that's the image behavior you want, if it's the oposite just change te toggled initialization to false and the image by default on the src (html).

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

Here's another solution with toggleClass() and attr() function :

See this fiddle

$(document).ready(function () {
    $("img").click(function () {
        $(this).toggleClass('active');
        if($(this).hasClass('active')){          
          $(this).attr("src","http://i.imgur.com/V4fKMWS.png");
        } else {    
          $(this).attr("src","http://i.imgur.com/YCf5zYt.png");
        }   
        $("#panel").slideToggle();
    });
});

Upvotes: 3

Asad
Asad

Reputation: 3160

there a mistakes in your code try this 

  var toggled = false;
       $("img").click(function () {
    if (!toggled) {
        $(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
        toggled = true;
    } else {
        $(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
        toggled = false;
    }

    $("p").slideToggle();
});

Upvotes: 1

Nishanth Almeida
Nishanth Almeida

Reputation: 148

you can change the attribue src.

 if (!toggled) {
            $(this).attr("src", "http://i.imgur.com/YCf5zYt.png");
            toggled = true;
        } else {
            $(this).attr("src", "http://i.imgur.com/V4fKMWS.png");
            toggled = false;
        }

Refer link: https://jsfiddle.net/sj7o9x58/2/

Upvotes: 1

MarengoHue
MarengoHue

Reputation: 1825

There are a couple of issues with the code:

First of all, you have to attach all of the event handlers from within the document ready callback. As it stands right now, it is possible that event handler is not attached because image tag may be not yet loaded when you try to attach the handler.

You also have to modify the src attribute of the image, not the css's url style:

$(this).attr("src", "http://i.imgur.com/YCf5zYt.png");

Upvotes: 1

Related Questions