How to make Expand Collapse of HTML DIV using jQuery and JavaScript

Hello.

I have this expanable code. and i was wonder if i can make a loop of something instead of reapting the javascript . all the id end with number start with 1 to x

<h4  >
Expander DIV <span id="expanderSign1" style="cursor:pointer;">+</span>
</h4>
<div id="expanderContent1" style="display:none">
content 1
</div>

<h4  >
Expander DIV2 <span id="expanderSign2" style="cursor:pointer;">+</span>
</h4>
<div id="expanderContent2" style="display:none">
content 2
</div>

$(document).ready(function(){
	$("#expanderSign1").click(function(){
		$("#expanderContent1").slideToggle();
		if ($("#expanderSign1").text() == "+"){
			$("#expanderSign1").html("−")
		}
		else {
			$("#expanderSign1").text("+")
		}
	});
    $("#expanderSign2").click(function(){
		$("#expanderContent2").slideToggle();
		if ($("#expanderSign2").text() == "+"){
			$("#expanderSign2").html("−")
		}
		else {
			$("#expanderSign2").text("+")
		}
	});
});

I am trying to find way not to keep repeate my javascript to just add number to the end of the id. (divs comes from database)