Need Help with hide() function

Need Help with hide() function

Within a page I have a nested div surrounding two select boxes, and a select box above it:

  1. <select......>
  2. </select>
  3. <div id="span_14u_roster">
  4. .....two select boxes and other tags
  5. </div>
I want to hide everything in the div until the user makes a selection in the select box above it. I wrote this jquery code:
  1.  $(document).ready(function(){
  2.     // first, blank the two roster selection boxes until
  3.     // the user selects a team.
  4.     $('#span_14u_roster').hide();
  5. });
However, when I load the page, the div and all its children objects are still visible. What am I doing wrong?

Mark