Check out my jsfiddle here:
I'm curious about how to create a smooth transition for the 'on click' event, so that it gradually appears on the page instead of appearing instantly?
Any assistance would be greatly appreciated. Here is the code snippet from the fiddle:
[html]
<div class="row no-show">
<p class="left-a">
<label for="manufacturer">Manufacturer</label>
<input type="text" name="manufacturer" id="manufacturer" value="" />
</p>
<p class="middle-a">
<label for="product_code">Product Code</label>
<input type="text" name="product_code" id="product_code" value="" />
</p>
<p class="middle-b">
<label for="condition">Condition</label>
<select name="condition">
<option value="">Please Select</option>
<option value="newsealed">New & Sealed</option>
<option value="tattybox">Tatty Box</option>
<option value="openbox">Opened Box</option>
<option value="openbag">Opened Bag</option>
</select>
</p>
<p class="right-a">
<label for="quantity">Qty</label>
<input type="text" name="quantity" id="quantity" value="" />
</p>
</div>
<button id="show" class="button purple">Add More Products</button>
[jquery]
$("#show").click(function(){
console.log("Button clicked!");
$(".no-show").show();
});
[css]
.no-show{display:none;}