jQuery - select onchange to slide in / slide out div or form

Question

Hi,

I am trying to enhance a form, by showing only relevant fields depending on initial selection via a form select field.

It is an order form for 3 products and all 3 products have unique properties.

My idea was to hide all the content in divs, then reveal the relevant div when the product is selected. I have found some solutions that show / hide a div, but none with any animation. It doesn't have to be a slide but just something nice!

The alternative is instead of revealing a div, would be to load a seperate form, but this seems unnecessary.

I am not sure whether i need a plug in, as I am pretty new to jquery.

What i have in the html is:

<style type="text/css">
.hide {
 display:none;
}

<select>
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>

<div id="pro1" class="hide" >Product 1</div>
<div id="pro2" class="hide" >Product 2</div>

Many thanks in advance

Answer 1

You can use the slideUp() and slideDown built-in effect.

Or any of the other built-in effects for jQuery. http://api.jquery.com/category/effects/

$(document).ready(function () {    
       $("#selectMenu").bind("change", function () {
        if ($(this).val() == "pro1") {
            $("#pro1").slideDown();
            $("#pro2").slideUp();
        }
        else if($(this).val() =="pro2") {
            $("#pro2").slideDown();
            $("#pro1").slideUp();
        }
    });
});

HTML:

<select id="selectMenu"> 
    <option value="" >Please select product below</option> 
    <option value="pro1">Product 1</option> 
    <option value="pro2">Product 2</option> 
</select> 

Answer 2

You can use JQuery's animate() method to construct your own styles of animations other than pre-defined animations such as sliding, fading, etc.