jQuery Toggle switch images

Question

Hi Guys,

I have a situation where I am not understanding jQuery's Toggle.

I have two buttons, both of them open the same content and when you click on either button the content should open or close and the attribute changes the button from open to closed. (So both buttons do the same function).

Only thing is, when I click on the top button and it opens my content and then click on the lower button to close it, the image attributes are switched incorrectly.

Here's a very stripped down version of what my code looks like and I would appreciate some help.

<script language="javascript" type="text/javascript">
    $(function () {

        var open = false;

        $("#button1, #button2").toggle(
            function () {
                open = true;
                $("#button1").attr("src", "images/btn-open.gif");
                $("#button2").attr("src", "images/btn-open.gif");
            },
            function () {
                if (open) {
                    $("#button1").attr("src", "images/btn-closed.gif");
                    $("#button2").attr("src", "images/btn-closed.gif");

                } else {
                    $("#button1").attr("src", "images/btn-open.gif");
                    $("#button2").attr("src", "images/btn-open.gif");

                }
                open = false;

            }
        );


    });
</script>

<img id="button1" src="images/btn-open.gif"></img>
<br />
<br />
<br />
<br />
<img id="button2" src="images/btn-open.gif"></img>

Answer 1

.toggle() will cycle between the n (usually 2, but it's not limited to 2) provided functions on each click per element, but you want one toggle for both buttons, not each one toggling indepdently, so do a check and use .click(), something like this:

var open = false;
$("#button1, #button2").click(function () {
  open = !open; //toggle it
  $("#button1, #button2") //set the src based on the new state
     .attr("src", "images/btn-" + (open ? "open" : "closed") + ".gif");
});

I also combined your selectors to make it a bit neater, it's the same effect though :) I'm not 100% sure from your images names so you may need to switch the boolean around, but you get the idea.