I want to create search filters for different types of properties, first all types of properties will show but when you click 'detached properties' then only detached properties will be shown? This is what I have so far:

Code:
<div id="main">
	
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td><div id="filter"><p class="houses" style="font-family:helvetica;color:#0155a1;font-size:14px;background:url(cutouts/forsale/filter.jpg) no-repeat;"><b><u>Houses</u></b>
						<br />
						<span class="dh"><b><u>Detached Houses</u></b></span>
						<br />
						<span class="dh"><b><u>Semi-detached houses</u></b></span>
						<br />
						<span class="dh"><b><u>Terraced houses</u></b></span>
						<br />
						<br />
						<b><u>Flats / Apartments</u></b>
	
	</p></div></td>
	<td><div id="info1"><a href="#"><img src="cutouts/forsale/pinfo1.jpg" alt=""/></a></div></td>
	</tr>
</table>

<div id="info2"><a href="#"><img src="cutouts/forsale/pinfo2.jpg" alt=""/></a></div>
<div id="info3"><a href="#"><img src="cutouts/forsale/pinfo3.jpg" alt=""/></a></div>
<div id="info4"><a href="#"><img src="cutouts/forsale/pinfo4.jpg" alt=""/></a></div>


<script type="text/javascript">

var properties = {$properties_json};

// very simple getter method that uses a single key-value pair.
var selectProperties(k, v) {
  var rv = [];
  for (var i in properties) {
    if (properties[i][k] == v) {
      rv.push(properties[i]);
    }
  }
  return rv;
} // selectProperties()


</script>
	
	</div>