Tenho uma tabela da seguinte forma:
<tabele>
<thead>
<tr>Codigo</tr>
</thead>
<tbody>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr>exemplo</tr>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr>exemplo</tr>
<tbody>
</tabele>
Tenho um script feito em JQuery que a cada click de acordo com a classe "click-show-hide-tr" ele mosta a proxima "tr" veja o script logo abaixo:
var toggleTable = (function () {
var init = function(){
$(".toggle-table tbody").on('click', '.click-show-hide-tr', function(){
$(this).closest("tr").next().toggle();
});
};
return {
init:init
}
})();
toggleTable.init();
Só que eu quero esconder todas as linhas secundária ao clicar novamente na primeira linha sem afetar as outras linhas que estão escondidas ou não Exemplo:
<tabele>
<thead>
<tr>Codigo</tr>
</thead>
<tbody>
/**
* Essa é a linha Principal supondo que as linhas secundarias
* estejam à mostra ao clicar nela de novo
* quero esconder todas elas sem afetar
* as outras linhas
*/
<tr class='click-show-hide-tr'>exemplo</tr>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr>exemplo</tr>
/**
* Esse é outra linha Principal com suas linhas secundarias
* Não posso afetar nada daqui para baixo
*/
<tr class='click-show-hide-tr'>exemplo</tr>
<tr class='click-show-hide-tr'>exemplo</tr>
<tr>exemplo</tr>
<tbody>
</tabele>