HTML/CSS - Image in div

[LaelC1955]

I'm adding a collapse function to my page, and so far it all works as it should.I use my header text (h2) to toggle the function like this:\[code\] <a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>Header 1</h2></a>\[/code\]Now, I want to add an image to the start of this. When collapsed, it's a plus-sign image. When opened, it turns into a minus-sign image.How do I do this?I think I've got the css part figured out, and the function (code below), but just not sure how to get the images to show.\[code\].toggleButton{display:inline;background-image:url(Special_images/pluss3.gif);background-size:auto;background-repeat:no-repeat;}.toggleButton.open{display:inline;background-image:url(Special_images/minus.gif);background-size:auto;background-repeat:no-repeat;}\[/code\]\[code\]<!-- SCRIPT FOR TOGGLE BUTTONS --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script>$(document).ready(function(){$('.toggleButton').click(function(){ $(this).toggleClass("open");});});</script><!-- END -->\[/code\]What I'm trying now, that doesnt work:\[code\]<a href="javascript:animatedcollapse.toggle('collapse_001')"><div class="toggleButton"><h2>Header 1</h2></div></a>\[/code\]Thanks a lot in advance,Stian Berg LarsenEDIT:This is one of the collapsing divs:\[code\]<a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>The Operator in Focus</h2></a><div id="collapse_002"><p>content goes here.. Bla bla bla bla....</p></div>\[/code\]So this works as it should. When you click on the header the div slides out, showing the text within the div "collapse_002".Now what I want is to display an image in front of the header, showing either a plus-sign or minus-sign if the div is open or closed.