Show/Hide Form Elements Based On Option Selected... Quick Help Needed

I am trying to display different parts of my form based on what is selected in a select box. Here's what I have:

<script type="text/javascript">
$(document).ready(function(){
 
	$("#thestore").css("display","none"); // Hide all these div's by default
	$("#thegroup").css("display","none");
	$("#theuser").css("display","none");


	$("#recip").change(function () {
	if ($('#recip option:selected').val() == "1" ) {
		
		$("#thestore").slideDown("fast"); //Slide Down Effect
		
	} else if ($('#recip option:selected').val() == "2" ) {
		
		$("#thegroup").slideDown("fast"); //Slide Down Effect
		
	} else if ($('#recip option:selected').val() == "3" ) {

                $("#theuser").slideDown("fast"); //Slide Down Effect
        }
	

     }); // End recip change function
}); // End document ready function
</script>

HTML:

Then in the actual form:

<div class="rowElem">
<label>To:</label>
<select name="recip" id="recip">
	<option value="0" selected="selected">Select One</option>
	<option value="1">Entire Store</option>
	<option value="2">Entire Group</option>
	<option value="3">Individual</option>
</select>
</div>


<div id="thestore">
<div class="rowElem">
<label>To store:</label>
<input type="text" name="rec_store">
</div>	
</div><!-- end thestore-->


<div id="thegroup">
<div class="rowElem">
<label>To group:</label>
<input type="text" name="rec_group">
</div>
</div><!-- end thegroup -->	


<div id="theuser">
<div class="rowElem">	
<label>To employee:</label>
<input type="text" name="rec_id">
</div>
</div><!-- end theuser -->	

HTML:

As you can see, I am trying to show these text boxes depending on what's selected in the select box. I can't seem to get this to work and I can't figure out why.

Could someone tell me what I'm doing wrong here? Any help would be appreciated!

 

What error is occurring? One thing that you will have to add to each onchange function is to hide all the divs before showing the selected div.