Question

I have two images with which I am using in an anchor tag. I am using jquery toggle on the click event of the anchor tag to swap between images.

    $(document).ready(function(){
        $('#registrationForm').hide();
        $('#callform').append("<a id='formlink'>IMAGE 1</a>");
        $("#formlink").click(function(){
            $('#registrationForm').toggle(function(){
                $('#formlink').empty().append(IMAGE 2);
            });
        });
    });

This works fine the first time around, however i want to toggle between the two images whenever the other is clicked.
Any ideas ?

Answer 1

I’d suggest adding both images initially, but hiding the second image. You can then toggle both images each time the link is clicked without needing to track the state of the images:

$(document).ready(function(){
    $('#callform').append("<a id='formlink1' class='formlink'>IMAGE 1</a>");
    $('#callform').append("<a id='formlink2' class='formlink' style='display: none;'>IMAGE 2</a>");
    $(".formlink").click( function(){
        $('#formlink1').toggle();
        $('#formlink2').toggle();
    });
});