How to expand row table with click

Question

How to expand row table with click

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am making a table and it will have a visible tr and below a hidden one and so on. In the last one, I put an 'expandTable' class and hide a 'HiddenTable' class. At the time of the click instead of opening the correspondent ends up opening all the hidden 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

asked by anonymous 19.01.2018 / 12:57

2 answers

Poloniex API Problem How to block and unbind a city / state IPs range in .htaccess?

score 0 · Answer 1

0

Friend you can use the bootstrap collapse: link , see if that's what you need.

19.01.2018 / 13:05

score 0 · Answer 2

I managed to solve it 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;
    }
});