Efficiently Sliding or Hiding Form Fields with jQuery
<p>Let's say that I have a form with a dropdown menu. The dropdown menu has two options. If the user chooses the second option, three additional fields that were previously invisible become visible. This is how one might implement that with jQuery:</p>

<pre><code>$(document).ready(function() {
    $('#my_dropdown').change(function() {
        if ($(this).val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    });
});
</code></pre>

<p>The problem with this method is that when the page is first loaded and the dropdown menu has the first option selected by default, the user might see the three fields sliding up, which might look jarring. So here's another way to do the same thing, but without the problem I just described:</p>

<pre><code>function dropdown_handler(animate) {
    if (animate == true) {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').slideDown();
        }
        else {
            $('#foo, #bar, #baz').slideUp();
        }
    }
    else {
        if ($('#my_dropdown').val() == 'option2') {
            $('#foo, #bar, #baz').show();
        }
        else {
            $('#foo, #bar, #baz').hide();
        }
    }
}

$(document).ready(function() {
    dropdown_handler(false);

    $('#my_dropdown').change(function() {
        dropdown_handler(true);
    });
});
</code></pre>

<p>The problem with this method, though, is that it seems rather bloated. How can this problem be solved efficiently?</p>
