jQuery - select onchange to slide in / slide out div or form
- by slayaz
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
