slideToggle does not animate on table

Question

I have a table in the head i have a button when the button is clicked i wnt the table rows to slide down for that i have used slideToggle(); but that is not working instead of the smooth slide effect it just shows & hide i tried slideToggle('slow') & slideToggle(500) but it did not work

JSFiddle

$(document).ready(function()
{   

$("#submenu").hide();

$("#mbtn").click(function(){
    $("#submenu").slideToggle(500);
});

});

possible duplicate of [slideToggle in table row](http://stackoverflow.com/questions/5126704/slidetoggle-in-table-row) — aimme, Sep 13 '15 at 05:24

Lyes BEN · Accepted Answer · 2015-09-13T05:16:19.420

1

slideToggle does not work with table elements. Good news is, you don't need a table to build a menu, in fact this is how we do it in a more semantic way :

<nav class="menu">
  <span class="btn">Menu</span>
  <ul>
   <li><a href="">Projects</a></li>
   <li><a href="">Contributors</a></li>
   <li><a href="">Contact us</a></li>
  </ul>
</nav>

You can also pass on the javascript for the animation, and use CSS animations. Check out this example.

edited Sep 13 '15 at 05:16

answered Sep 13 '15 at 05:06

Lyes BEN

990
4
14

1

Instead of a `
` you could use `
` - this is what your linked example also does (for those who don't click through).
– Ash Sep 13 '15 at 05:13

score 1 · Answer 2 · answered Sep 13 '15 at 05:24

Your jQuery looks correct. I believe the issue is with using slideToggle on #submenu which is a tbody element. The slideToggle function works by reducing the elements height, over the specified time to 0, then display:none. To fix this simply apply display: block to #submenu.

#submenu {
  display: block;
}

score 0 · Answer 3 · answered Sep 13 '15 at 05:57

The ready-made animation methods are for block-level elements only. To wok with you can set tbody element as block level element.

<script type="text/javascript" src="https://code.jquery.com/jquery- 1.10.2.js"></script>
<table class="table table-hover">
<thead>
    <tr>
        <th id="mbtn" class="btn" style="text-align:center;"><h1>Menu</h1> </th>
    </tr>
</thead>
<tbody id="submenu" style="display:block">
    <tr><td>Projects</td></tr>
    <tr><td>Contributers</td></tr>
    <tr><td>Submit project</td></tr>
    <tr><td>Contact us</td></tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function()
{
 $("#submenu").hide();
 $("#mbtn").click(function(){
    $("#submenu").slideToggle("slow");
 });
});
</script>

slideToggle does not animate on table

3 Answers3