Question

I need help getting an image to toggle ‘on’ and ‘off’ states when clicked as well as toggle a div to show/hide. I need these to toggle back and forth when clicked. Any ideas?

<a href="#" onclick="toggle();"><img src="/images/control.png" /></a>

<div id="box1">
Showing first box content
</div>

<div id="box2" style="display:none;">
Show second box content when control image is clicked
</div>

Answer 1

I would use unobtrusive script for this if possible, like this:

<a href="#" id="toggler"><img src="/images/control.png" /></a>

Then you can bind it to toggle then, like this:

$(function() {                      //run when the DOM is ready
  $('#toggler').click(function() {  //bind to the anchor click
    $('#box1, #box2').toggle();     //toggle both, effectively swapping them
  });
});