HTML/CSS - Image in div - css

Question

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:
<h2>Header 1</h2>
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.
.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;
}
<!-- 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 -->
What I'm trying now, that doesnt work:
<div class="toggleButton"><h2>Header 1</h2></div>
Thanks a lot in advance,
Stian Berg Larsen
EDIT:
This is one of the collapsing divs:
<h2>The Operator in Focus</h2>
<div id="collapse_002">
<p>content goes here.. Bla bla bla bla....</p>
</div>
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.

Answer 1

I have made you a very simple image swap, using toggle, adding open class..basically just swopping background images :
http://jsfiddle.net/934bA/
*Please ignore temp background urls and sizes
Let me know if there is something else.
I hope this gives your the base understanding and that it's very simple...it's basically just an add of and class, and remove of a class = toggle.
BREAKDOWN :
Html
<div class="toggleButton"><h2>Header 1</h2></div>
Script
$(function() {
$('.toggleButton').click(function() {
$(this).toggleClass("open");
});
});
CSS
.toggleButton{
display:inline;
background-image:url(http://upload.wikimedia.org/wikipedia/en/3/35/Plus_sign.jpg);
background-size:20%;
background-repeat:no-repeat;
background-position:left;
padding:20px;
}
.open{
background-image:url(http://userserve-ak.last.fm/serve/252/3850515.jpg);
}
h2 {margin:0px; padding:0px;display:inline;}

Answer 2

p {
margin:0;
padding-left:16px;
float:left;
background-image:url(images/add.png);
background-repeat:no-repeat;
}
p.down {
float:left;
padding-left:16px;
background-image:url(images/delete.png);
background-repeat:no-repeat;
}
.button
{
vertical-align:middle;
}
.question div
{
border:1px solid #CC0000;
background-color:#efefef;
width:580px;
margin-top:5px;
font-size:12px;
padding:5px;
clear:left;
}
.question div a
{
padding-left:20px;
background: transparent url(images/world_go.png) no-repeat center left;
text-decoration:none;
} /
$(document).ready(function() {
$('div.question')
.children('div').hide().end()
.children('p').click(function(){
$(this).toggleClass('down').next().slideToggle("slow");
});
});
<div class="question">
<p class="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna.
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li>
</ul>
</div>
</div>
This is a toggle with plus minus for the front of the paragraph, with a collapse toggle of the paragraph below.

Answer 3

tried background-position: 0 0; ?