CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kalpesh
Kalpesh

Reputation: 113

slideToggle does not animate on table

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

});

Upvotes: 0

Views: 1381

Answers (3)

Md. Salahuddin
Md. Salahuddin

Reputation: 1072

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>

Upvotes: 0

Andrew Carter
Andrew Carter

Reputation: 109

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

Upvotes: 1

Lyes BEN
Lyes BEN

Reputation: 1010

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.

Upvotes: 1

Related Questions