How to expand table row with click

Asked

Viewed 776 times

0

I am making a table and in it will have a visible tr and below a hidden and so on. On the visible tr I put a class 'expandTable' and on the hidden a class 'table'. At the time of clicking instead of opening the corresponding one ends up opening all the hidden ones at once, in jquery I did so

var tabelaOculta =  $(".tabelaOculta").hide();
var oculta = false;
$(".expandirTabela").click(function(){

    if(oculta == false){
        $(this).parent().find(".tabelaOculta").show();
        oculta = true;

    }else{
        $(this).parent().find(".tabelaOculta").hide();
        oculta = false;
    }
});

and my table

<tr class="expandirTabela">
    <td>+</td>
    <td>R$ 60.000,00</td>
    <td>R$ 15.000,00</td>
</tr>
<tr class="tabelaOculta">
    <td colspan="3">
        <table>
            <tr>
                 <td>conteúdo oculto aqui</td>
            </tr>
        </table>
    </td>
</tr>
html jquery html5

  • Where are you hiding before calling the onclick event. When loading the page? or in CSS?

  • Friend you can use the bootstrap Collapse: https://getbootstrap.com/docs/4.0/components/collapse/, see if this is what you need.

  • after loading the page

1 answer

0

I managed to sort it out like this

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

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

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

    }else if(oculta == true){
        tabelaOculta.hide();
        oculta = false;
    }
});

Browser other questions tagged html jquery html5

You are not signed in. Login or sign up in order to post.