Alternative method to display content
<p>The selected radio button will show its corresponding dropdown box.</p>

<p>For example, upon the selected radio button ‘Ontario’, a dropdown box with matching cities will show up.</p>

<p>I have the following working code for the above example:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
  $("#searchForm input:radio").change(function() {

      var buttonPressed = $('[name="Region"]:radio:checked').val();
      var cityElmntBox = document.getElementById("dispalyCityBox");

      if(buttonPressed == 'Ontario'){
          cityElmntBox.style.display='block';
      } else {
          cityElmntBox.style.display='none';
      }

  });   
});
&lt;/script&gt; 
</code></pre>

<p>Instead of the sudden effect (<code>display='block'</code>), I wanted to use for the selected elements the <code>slideDown()</code> method.</p>

<p>So I replaced:</p>

<pre><code>cityElmntBox.style.display='block';
</code></pre>

<p>with:</p>

<pre><code>cityElmntBox.slideDown(500);
</code></pre>

<p>But this doesn’t work…, please can someone help me get it working?</p>
