I can write PHP all day but am just getting started with Javascript, jQuery, and clientside scripting in general. I'm trying to write a function that will show the div #genders when "Shared" is selected from a dropdown menu. In all other cases I want the div to be hidden.

Here's what the HTML looks like

Code:
<label for="status">Property Status</label>
<select name="status" id='selector' onChange='toggleShared();'>
<option value="" selected="selected"></option>
<option value="Shared">Shared</option>
<option value="Vacant">Vacant</option>
</select>

<div id='genders' style='display:none;'>
<label for="gender">Gender Preference</label>
<select name="gender" id='genders'>
<option value="No Preference">No Preference</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select></div>
Here's some javascript/pseudo-code i came up with to try to get this to work but I haven't been able to so far. I'm using jQuery in another portion of the page so it is loaded in if it would be easier to write a jQuery function.

Code:
<script>
     function toggleShared() {
          selector = document.getElementById('selector');
          genders = document.getElementById('genders');
          if(selector.val() == 'Shared') {
                genders.style.display = 'block';
          }
          else {
                genders.style.display = 'none';
          }
     }
</script>
I appreciate any feedback!