jQuery Toggle switch images
- by Sixfoot Studio
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>
