Sliding up or down an entire HTML table using jquery, doesn't work

Question

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;
}

Answer 1

If you are going to remove the table, using .wrapAll(...) will prevent you having to embellish your markup with unnecessary tags.

The following example adds the div dynamically when it's needed to slide the table closed, and then removes the table (and the temporary div):

$('#tableId').wrapAll('<div />').closest('div').slideUp(1000, function () {
    $('#tableId').closest('div').remove();
});

Answer 2

Tables are finicky and you should avoid using effects on a table directly. What does work is wrapping a div around your table and applying your effect to that instead.

You don't have the same control over tables as you do other elements. Which is why blindUp can't change the height of the table during animation.

here is an example: http://jsfiddle.net/BQTGF/

Answer 3

A table is not a block level element, so its height and width are not settable. In order to get this to work, wrap the table in a block level element, such as a div tag, and perform the slideUp on the div

<div id="wrapper">
 <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>

$('#voucher-btn').click(function(e){
    $('#wrapper').slideUp(400);
    e.preventDefault();
});