slideDown effect does not work in table

Question

I am giving the effect of slideDown() and slideup() in my table, it opens normally but does not give the expected effect. follow the code

$(".tabelaOculta").hide();
var oculta = false;

$(".expandirTabela").click(function(){

    if(oculta == false){
        $(this).parent().next('.tabelaOculta').slideDown();
        oculta = true;

    }else if(oculta == true){
        $(this).parent().next('.tabelaOculta').slideUp();
        oculta = false;
    }
});

the html

<tr>
    <td class="expandirTabela"><i class="fa fa-plus" aria-hidden="true"></i>
    </td>
    <td><a href="#">Faça o login</a></td>
    <td><a href="#" class="btn-table-disp">DISPONIVEL</a></td>
</tr>
<tr class="tabelaOculta">
    <td colspan="3">
        <table>
            <tr>
            </tr>
        </table>
     </td>
</tr>

Answer 1

The effects .slideDown or .slideUp do not work in table rows. In this element you will have an effect equal to .show() and .hide(). The effect works on any other element than <table>.

You would have to include content that wants to make the effect on a div and change the selectors in jQuery:

$(".tabelaOculta").hide();
var oculta = false;

$(".expandirTabela").click(function(){

    if(oculta == false){
        $(this).closest("table").find('.tabelaOculta').slideDown();
        oculta = true;

    }else if(oculta == true){
        $(this).closest("table").find('.tabelaOculta').slideUp();
        oculta = false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<table>
   <tr>
      <td class="expandirTabela">
         <i class="fa fa-plus" aria-hidden="true"></i>
      </td>
      <td>
         <a href="#">Faça o login</a>
      </td>
      <td>
         <a href="#" class="btn-table-disp">DISPONIVEL</a>
      </td>
   </tr>
   <tr>
      <td colspan="3">
         <div class="tabelaOculta">
            conteúdo
         </div>
      </td>
   </tr>
</table>