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