problem with slide in ie7

problem with slide in ie7

Hi all

I have added the slide effect to an area of my page so that it slides out when a link is clicked. The area contains form elements such as selects and text fields.

Works perfrectly in FF but in IE 7 the area slides out but the form elements are bunched up for a second or 2 before sliding to their correct position - very ugly

Is there a way round this below is my code:

  <script>
$(document).ready(function(){
   
    $('#show').click(function () {
      if ($('#searchOptions').is(":hidden")) {
        $('p').slideDown("slow");
      $('div.clear').slideDown("slow");
      $('label').slideDown("slow");
      $('select').slideDown("slow");
      $('input').slideDown("slow");
      $('#searchOptions').slideDown("slow");
      
      } else {
        $('#searchOptions').hide();
      }
    });

  });


  </script>


<div class="clear">
                              <a id="show">Advanced Search</a>
                           </div>
                           <div id="searchOptions" style="display:none;">
                                       <div class="clear" style="display: none">
                                           <label for="theLocation"><span class="strong">Area:</span></label>
                                           <select name="theLocation" id="theLocation" class = ""><WEM EXTN0001></WEM></select>

                                       </div>
                                       <div class="clear">
                                           <label for="theProgramme"><span class="strong">Programme:</span></label>
                                           <select name="theProgramme" id="theProgramme" class = ""><WEM EXTN0003></WEM></select>

                                       </div>
                                       <div class="clear">
                                           <label for="theInterest"><span class="strong">Type:</span></label>
                                             <select id="theInterest" name="theInterest" class=""><WEM EXTN0004></WEM></select>
                                       </div>
                  
                                   
                                <div class="clear">
                                    <label for="from_date">Date from:</label>
                                    <input id="from_date" name="from_date" class="text date-pick" value="<!WEM request.from_date>" />
                                </div>
                                <div class="clear">
                                    <label for="end_date">Date to:</label>

                                    <input class="text date-pick" type="text" name="end_date" id="end_date" value="<!WEM request.end_date>" />
                                </div>
                        <p style="display: none">Hello</p>
                                 </div>


would appreciate any suggestions

thanks in advance