Question

Ive built a number of forms that I now want to display based on the user choosing the nessecary select option.
What is the best way to add this within jquery so that I can animate the forms (i.e fading in and out) when selected.

Thanks,

Answer 1

You may consider using a pre-built option from jQuery UI, such as http://jqueryui.com/demos/accordion/ or http://jqueryui.com/demos/tabs/

If you want to build it yourself, you can start with:

​<select id="chooser">
    <option value="">Select...</option>
    <option​​​​​ value="formOne">One</option>
    <option value="formTwo">Two</option>
    <option value="formThree">Three</option>
​</select>

<form id="formOne" class="chooseable">Form One is here.</form>
<form id="formTwo" class="chooseable">Form Two is here.</form>
<form id="formThree" class="chooseable">Form Three is here.</form>​

The JavaScript:

jQuery(function($) {
    $('.chooseable').hide();
    var shown = false;
    $('#chooser').change(function() {
        var next = this.value;
        if (shown) {
            $('#'+shown).fadeOut('slow', function() {
                if (next) $('#'+next).fadeIn();
            });
        } else if (next) $('#'+next).fadeIn();
        shown = next;
    });
});

See the fiddle: http://jsfiddle.net/XG87j/