I need help using the jQuery toggle function to swap image and div content

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

Elaborate on what you want to do with the image... I assume you meant you want to toggle each div, depending on the click. This will toggle each <div> so only one will be shown at a time.

<a href="#" onclick="$('#box1').toggle();$('#box2').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 2

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
  });
});