select drop down menu, if a certain item is selected, so div of html

[bradkenyon]

I have a drop down box that I want to display certain information if that item is selected within the select drop down box.

 

So if that item is selected, then it will automatically display another part of the form the user will need to fill out.

 

i want to do this, so it will shorten the form up for the user, basically only showing the fields they need to fill out based on what item they select in the drop down box.

 

How do I accomplish this using jQuery?

[bradkenyon]

$(document).ready(function() {
$('select').change(function() {
	var thisValue = $(this).val();
	switch (thisValue) {
		case "1":
			$("div.event_fields").fadeIn("slow");
		break;
		case "2":
			$("div.event_fields").fadeIn("slow");
		break;
		case "3":
			$("div.event_fields").fadeIn("slow");
		break;
		case "4":
			$("div.event_fields").fadeOut("slow");
		break;
		case "5":
			$("div.event_fields").fadeOut("slow");
		break;
		case "6":
			$("div.event_fields").fadeOut("slow");
		break;
		case "7":
			$("div.event_fields").fadeOut("slow");
		break;
	}
});
});

<select name="event_type_id">
					<option>Select Event Type</option>
					<option value="2">Events Student</option>
					<option value="3">Events Faculty/Staff</option>
					<option value="1">Events FS & Students</option>
					<option value="5">Announcements Student</option>
					<option value="6">Announcements Faculty/Staff </option>
					<option value="7">Announcements FS & Students</option>
					<option value="4">Food Item</option>
				</select>

 

<div class="event_fields" style="display: none">Display Events</div>