slideDown effect does not work in table

Question

slideDown effect does not work in table

Navigation

#1 by (1 votes)

1

I'm giving the effect of slideDown () and slideUp () on 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;
    }
});

or 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>

html jquery

asked by anonymous 19.01.2018 / 14:41

1 answer

Remove duplicate names by VBA approach [closed] Link in terminal

score 1 · Accepted Answer

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

You would have to include the 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><linkrel="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>