Use jQuery to allow showing/hiding a page element.

HTML - How to call it

<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// Fill this array with ids for the elements you want to hide
		var revealables = ["partner_details"];
		prep(revealables);

		// Fill this array with select boxes to watch for changes
		var watchables = ["marital_status"];
		watch(watchables);
	});
</script>

HTML - Select box setup

<label for="marital_status">Marital status</label>
<select name="marital_status" id="marital_status">
	<option value="0" selected="selected">Single</option>
	<option value="1" title="partner_details">Married</option>
	<option value="2" title="partner_details">Co-habiting</option>
	<option value="3" title="partner_details">Civil Partnership</option>
	<option value="4" >Separated</option>
	<option value="5" >Divorced</option>
	<option value="6" >Widowed</option>
</select>

jQuery - Reveal divs using a select box

// Set var for remembering the last revealed item
var last_ref = '';

// Let's roll
function prep(revealables){
	$.each(revealables, function(){
		$("#"+this).hide();
	});
}

function watch(watchables){
	$.each(watchables, function(){
		$("#"+this).change(function(){
			var ref = $("#"+this.id+" :selected").attr("title");
			if(ref.length == 0 || $("#"+ref).length == 0){
				$("#"+last_ref).hide();
			}
			else {
				if(last_ref != ''){
					$("#"+last_ref).hide();
				}
				$("#"+ref).show();
				last_ref = ref;
			}
		});
	});
}