I've been looking for a solution but I couldn't find it. I even tried this from SO, div will slidedown but it wont slideup
Basically I'm using the slideUp()
from jquery on a table but it doesn't slide up, instead it just dissappear.
I've done the float: none
on the table, add position: relative
to the parent element. But it still doesn't show the sliding effect.
jquery:
$('#voucher-btn').click(function(e){
$('#voucher-list').slideUp(400);
e.preventDefault();
});
html:
<div id="main">
<ul>
<li><label>Scratch-off Panel</label><input type="text" id="scratch-panel" /></li>
<li><label>Serial Number</label><input class="field-small" type="text" id="serial-num" /></li>
<!--<li><button class="but-sec" id="voucher-btn" type="submit" title="Apply">Apply</button></li>-->
<li><input class="but-sec" type="submit" id="voucher-btn" value="Apply" /></li>
</ul>
<table id="voucher-list">
<thead>
<tr>
<th width="200px">$Value One</th><th>$Value Two</th><th>$Value Three</th><th>$Value Four</th>
</tr>
</thead>
<tbody>
<td>MSFRGFCHGGKJVJ1234</td><td>12345678</td><td>£156678</td><td>Remove</td>
</tbody>
</table>
</div>
CSS:
#main{
width: 700px;
margin: 20px auto;
position: relative;
}
#voucher-list{
border-collapse: collapse;
float: none;
position: relative;
}
#voucher-list td, th{
border: 1px solid #ccc;
padding: 5px;
text-align: left;
}
li{
list-style: none;
overflow: hidden;
margin: 0 0 10px 0;
}
input[type="text"]{
float: left;
height: 20px;
border: 1px solid #ccc;
}
label{
float: left;
width: 120px;
}