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

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 sh开发者_如何学Cow 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;
}

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/

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

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

One thing you can do is wrap the whole table in a division and then use toggle method as follows:

$('<table id>').wrapInner('<div></div>').toggle('slide', { direction: "direction" }, speed);

I learn something about javaScript this last days and i think this code may help you:

    $(document).ready(function()  {
    // Hide the table tags
     $("table").hide();

     $("h1").click(function() {
         $(this).next().slideToggle(500);
         });

});

What this code should do is that with the tag "H1" clicking it should hide the tag "Table" But i look a bit messed the slide thing but is there Hide and Show. Hope i Help