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>
