Como usar a function slideDown (ou show) em uma linha da tabela?

Eu estou tentando adicionar uma linha a uma tabela e ter esse slide de linha em vista, no entanto, a function slidedown parece estar adicionando um display: estilo de bloco para a linha da tabela que atrapalha o layout.

Alguma idéia de como contornar isso?

Aqui está o código:

$.get('/some_url', { 'val1': id }, function (data) { var row = $('#detailed_edit_row'); row.hide(); row.html(data); row.slideDown(1000); } ); 

Não há suporte para animações nas linhas da tabela.

De “Aprendendo jQuery” por Chaffer e Swedberg


As linhas da tabela apresentam obstáculos específicos à animação, uma vez que os navegadores usam valores diferentes (linha de tabela e bloco) para sua propriedade de exibição visível. Os methods .hide () e .show (), sem animação, são sempre seguros para usar com linhas de tabela. A partir do jQuery versão 1.1.3, .fadeIn () e .fadeOut () também podem ser usados.


Você pode embrulhar seu conteúdo de td em um div e usar o slideDown sobre isso. Você precisa decidir se a animação vale a marcação extra.

Eu simplesmente envolvo o tr dinamicamente e removo-o assim que o slideUp / slideDown estiver completo. É uma pequena sobrecarga adicionar e remover uma ou duas tags e depois removê-las assim que a animação estiver completa, não vejo qualquer atraso visível em fazê-lo.

SlideUp :

 $('#my_table > tbody > tr.my_row') .find('td') .wrapInner('
') .parent() .find('td > div') .slideUp(700, function(){ $(this).parent().parent().remove(); });

Deslize para baixo:

 $('#my_table > tbody > tr.my_row') .find('td') .wrapInner('
') .parent() .find('td > div') .slideDown(700, function(){ var $set = $(this); $set.replaceWith($set.contents()); });

Eu tenho que prestar homenagem ao fletchzone.com como eu levei o seu plugin e despojado de volta para o companheiro acima, cheers.

Aqui está um plug-in que eu escrevi para isso, é preciso um pouco da implementação do Fletch, mas o meu é usado apenas para deslizar uma linha para cima ou para baixo (sem inserir linhas).

 (function($) { var sR = { defaults: { slideSpeed: 400, easing: false, callback: false }, thisCallArgs: { slideSpeed: 400, easing: false, callback: false }, methods: { up: function (arg1,arg2,arg3) { if(typeof arg1 == 'object') { for(p in arg1) { sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) { sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined') { sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function') { sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).find('td'); $cells.wrapInner('
'); var currentPadding = $cells.css('padding'); $cellContentWrappers = $(this).find('.slideRowUp'); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({ paddingTop: '0px', paddingBottom: '0px'},{ complete: function () { $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents()); $(this).parent().css({'display':'none'}); $(this).css({'padding': currentPadding}); }}); var wait = setInterval(function () { if($cellContentWrappers.is(':animated') === false) { clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function') { sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); }, down: function (arg1,arg2,arg3) { if(typeof arg1 == 'object') { for(p in arg1) { sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) { sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined') { sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function') { sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).find('td'); $cells.wrapInner(''); $cellContentWrappers = $cells.find('.slideRowDown'); $(this).show(); $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); }); var wait = setInterval(function () { if($cellContentWrappers.is(':animated') === false) { clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function') { sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } } }; $.fn.slideRow = function(method,arg1,arg2,arg3) { if(typeof method != 'undefined') { if(sR.methods[method]) { return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1)); } } }; })(jQuery);

Uso Básico:

 $('#row_id').slideRow('down'); $('#row_id').slideRow('up'); 

Passe as opções de slides como argumentos individuais:

 $('#row_id').slideRow('down', 500); //slide speed $('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function $('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function $('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object 

Basicamente, para a animação deslizante, o plug-in envolve o conteúdo das células em DIVs, anima essas e, em seguida, as remove, e vice-versa para o slide para cima (com algumas etapas extras para se livrar do preenchimento da célula). Ele também retorna o object para o qual você ligou, para que você possa encadear methods da seguinte forma:

 $('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red 

Espero que isso ajude alguém.

Você poderia tentar quebrar o conteúdo da linha em um e ter seu seletor $('#detailed_edit_row span'); – um pouco hackish, mas acabei de testar e funciona. Eu também tentei a sugestão de table-row acima e não parece funcionar.

update : Eu tenho andado a brincar com este problema e, de todas as indicações, o jQuery precisa que o object que executa o slideDown seja um elemento de bloco. Então, não há dados. Consegui conjurar uma tabela onde usei slideDown em uma célula e isso não afetou o layout, então não tenho certeza de como o seu está configurado. Eu acho que sua única solução é refatorar a tabela de tal forma que seja ok com aquela célula sendo um bloco, ou apenas .show(); a maldita coisa. Boa sorte.

Estou um pouco atrasado em responder isso, mas encontrei uma maneira de fazer isso 🙂

 function eventinfo(id) { tr = document.getElementById("ei"+id); div = document.getElementById("d"+id); if (tr.style.display == "none") { tr.style.display="table-row"; $(div).slideDown('fast'); } else { $(div).slideUp('fast'); setTimeout(function(){tr.style.display="none";}, 200); } } 

Acabei de colocar um elemento div dentro das tags de dados da tabela. quando é definido como visível, à medida que a div se expande, toda a linha desce. em seguida, diga a ele para desvanecer o backup (depois o tempo limite para que você veja o efeito) antes de ocultar a linha da tabela novamente 🙂

Espero que isso ajude alguém!

Selecione o conteúdo da linha assim:

 $(row).contents().slideDown(); 

.contents () – Obtém os filhos de cada elemento no conjunto de elementos correspondentes, incluindo nós de texto e comentário.

Sou um novato para esta comunidade. Pl taxa minha resposta. 🙂

Você pode encontrar este aqui funciona bem.

Estou tendo uma tabela (

)

dentro do

da

.

Para deslizar pela fileira ..

 $('.dummyRow').show().find("table").slideDown(); 

Nota: a linha e o conteúdo dentro da linha (aqui é a table ) devem estar ocultos antes do início da animação.

Para deslizar para cima a linha ..

 $('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();}); 

segundo parâmetro (function) é um retorno de chamada.

Simples!!

Eu consegui contornar isso usando os elementos td na linha:

 $(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000); 

A animação da própria linha causa um comportamento estranho, principalmente problemas de animação assíncrona.

Para o código acima, estou destacando uma linha que é arrastada e solta na tabela para destacar que a atualização foi bem-sucedida. Espero que isso ajude alguém.

Eu quero deslizar todo o corpo e eu consegui este problema combinando efeitos de fade e slide.

Eu fiz isso em 3 estágios (2ª e 3ª etapas são substituídas caso você queira deslizar para baixo ou para cima)

  1. Atribuindo altura ao corpo,
  2. Desbotando todos os td e th,
  3. Deslizando o corpo.

Exemplo de slideUp:

 tbody.css('height', tbody.css('height')); tbody.find('td, th').fadeOut(200, function(){ tbody.slideUp(300) }); 

Eu tive problemas com todas as outras soluções oferecidas, mas acabei fazendo essa coisa simples que é suave como manteiga.

Configure seu HTML da seguinte forma:

    

Em seguida, configure seu javascript assim:

 function toggleRow(rowid){ var row = document.getElementById("row" + rowid) if(row.style.height == "0px"){ $('#div' + rowid).slideDown('fast'); row.style.height = "1px"; }else{ $('#div' + rowid).slideUp('fast'); row.style.height = "0px"; } } 

Basicamente, torne a linha “invisível” 0px alta, com uma div dentro.
Use a animação na div (não na linha) e defina a altura da linha como 1 px.

Para ocultar a linha novamente, use a animação oposta na div e defina a altura da linha de volta para 0 px.

Eu gostei do plugin que o Vinny escreveu e está usando. Mas no caso de tabelas dentro da linha deslizante (tr / td), as linhas da tabela aninhada ficam sempre ocultas mesmo depois de deslizarem para cima. Então eu fiz um truque rápido e simples no plugin para não esconder as linhas da tabela aninhada. Apenas mude a seguinte linha

 var $cells = $(this).find('td'); 

para

 var $cells = $(this).find('> td'); 

que encontra apenas tds imediatas não aninhadas. Espero que isso ajude alguém usando o plugin e tenha tabelas aninhadas.

Eu gostaria de acrescentar um comentário no post do # Vinny, mas não tem o representante então tem que postar uma resposta …

Encontrei um bug com o seu plugin – quando você acabou de passar um object com argumentos, eles são sobrescritos se nenhum outro argumento for passado. Facilmente resolvido mudando a ordem em que os argumentos são processados, código abaixo. Eu também adicionei uma opção para destruir a linha após o fechamento (apenas porque eu precisava dela!): $ (‘# Row_id’). SlideRow (‘up’, true); // destrói a linha

 (function ($) { var sR = { defaults: { slideSpeed: 400, easing: false, callback: false }, thisCallArgs: { slideSpeed: 400, easing: false, callback: false, destroyAfterUp: false }, methods: { up: function (arg1, arg2, arg3) { if (typeof arg2 == 'string') { sR.thisCallArgs.easing = arg2; } else if (typeof arg2 == 'function') { sR.thisCallArgs.callback = arg2; } else if (typeof arg2 == 'undefined') { sR.thisCallArgs.easing = sR.defaults.easing; } if (typeof arg3 == 'function') { sR.thisCallArgs.callback = arg3; } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') { sR.thisCallArgs.callback = sR.defaults.callback; } if (typeof arg1 == 'object') { for (p in arg1) { sR.thisCallArgs[p] = arg1[p]; } } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) { sR.thisCallArgs.slideSpeed = arg1; } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) { sR.thisCallArgs.destroyAfterUp = arg1; } else { sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } var $row = $(this); var $cells = $row.children('th, td'); $cells.wrapInner('
'); var currentPadding = $cells.css('padding'); $cellContentWrappers = $(this).find('.slideRowUp'); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, { complete: function () { $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents()); $(this).parent().css({ 'display': 'none' }); $(this).css({ 'padding': currentPadding }); } }); var wait = setInterval(function () { if ($cellContentWrappers.is(':animated') === false) { clearInterval(wait); if (sR.thisCallArgs.destroyAfterUp) { $row.replaceWith(''); } if (typeof sR.thisCallArgs.callback == 'function') { sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); }, down: function (arg1, arg2, arg3) { if (typeof arg2 == 'string') { sR.thisCallArgs.easing = arg2; } else if (typeof arg2 == 'function') { sR.thisCallArgs.callback = arg2; } else if (typeof arg2 == 'undefined') { sR.thisCallArgs.easing = sR.defaults.easing; } if (typeof arg3 == 'function') { sR.thisCallArgs.callback = arg3; } else if (typeof arg3 == 'undefined' && typeof arg2 != 'function') { sR.thisCallArgs.callback = sR.defaults.callback; } if (typeof arg1 == 'object') { for (p in arg1) { sR.thisCallArgs.eval(p) = arg1[p]; } } else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) { sR.thisCallArgs.slideSpeed = arg1; } else { sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } var $cells = $(this).children('th, td'); $cells.wrapInner(''); $cellContentWrappers = $cells.find('.slideRowDown'); $(this).show(); $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function () { $(this).replaceWith($(this).contents()); }); var wait = setInterval(function () { if ($cellContentWrappers.is(':animated') === false) { clearInterval(wait); if (typeof sR.thisCallArgs.callback == 'function') { sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } } }; $.fn.slideRow = function (method, arg1, arg2, arg3) { if (typeof method != 'undefined') { if (sR.methods[method]) { return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } } }; })(jQuery);

Eu usei as idéias fornecidas aqui e enfrentei alguns problemas. Eu consertei todos eles e tenho um one-liner que eu gostaria de compartilhar.

 $('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('
').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});

Ele usa css no elemento td. Reduz a altura para 0 px. Dessa forma, apenas a altura do conteúdo do div-wrapper recém-criado dentro de cada elemento td é importante.

O slideUp está lento. Se você fizer isso ainda mais lento, você pode perceber alguma falha. Um pequeno salto no começo. Isso é por causa da configuração de css mencionada. Mas sem essas configurações, a linha não diminuiria de altura. Apenas seu conteúdo seria.

No final, o elemento tr é removido.

A linha inteira contém apenas JQuery e nenhum Javascript nativo.

Espero que ajude.

Eu precisava de uma tabela com linhas ocultas que entram e saem da vista no clique da linha.

 $('.tr-show-sub').click(function(e) { var elOne = $(this); $('.tr-show-sub').each(function(key, value) { var elTwoe = $(this); if(elOne.get(0) !== elTwoe.get(0)) { if($(this).next('.tr-sub').hasClass('tr-sub-shown')) { elTwoe.next('.tr-sub').removeClass('tr-sub-shown'); elTwoe.next('tr').find('td').find('div').slideUp(); elTwoe.next('tr').find('td').slideUp(); } } if(elOne.get(0) === elTwoe.get(0)) { if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) { elOne.next('.tr-sub').removeClass('tr-sub-shown'); elOne.next('tr').find('td').find('div').slideUp(); elOne.next('tr').find('td').slideUp(); } else { elOne.next('.tr-sub').addClass('tr-sub-shown'); elOne.next('tr').find('td').slideDown(); elOne.next('tr').find('td').find('div').slideDown(); } } }) }); 
 body { background: #eee; } .wrapper { margin: auto; width: 50%; padding: 10px; margin-top: 10%; } table { background: white; width: 100%; } table th { background: gray; text-align: left; } table th, td { border-bottom: 1px solid lightgray; padding: 5px; } table .tr-show-sub { background: #EAEAEA; cursor: pointer; } table .tr-sub td { display: none; } table .tr-sub td .div-sub { display: none; } 
  
col 1 col 2 col 3
col 1 col 2 col 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
col 1 col 2 col 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
col 1 col 2 col 3

Se você precisar deslizar e desbotar uma linha da tabela ao mesmo tempo, tente usá-las:

 jQuery.fn.prepareTableRowForSliding = function() { $tr = this; $tr.children('td').wrapInner('
'); return $tr; }; jQuery.fn.slideFadeTableRow = function(speed, easing, callback) { $tr = this; if ($tr.is(':hidden')) { $tr.show().find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); } else { $tr.find('td > div').animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function(){ $tr.hide(); callback(); }); } return $tr; }; $(document).ready(function(){ $('tr.special').hide().prepareTableRowForSliding(); $('a.toggle').toggle(function(){ $button = $(this); $tr = $button.closest('tr.special'); //this will be specific to your situation $tr.slideFadeTableRow(300, 'swing', function(){ $button.text('Hide table row'); }); }, function(){ $button = $(this); $tr = $button.closest('tr.special'); //this will be specific to your situation $tr.slideFadeTableRow(300, 'swing', function(){ $button.text('Display table row'); }); }); });
 function hideTr(tr) { tr.find('td').wrapInner('
').parent().find('td > div').slideUp(50, function () { tr.hide(); var $set = jQuery(this); $set.replaceWith($set.contents()); }); } function showTr(tr) { tr.show() tr.find('td').wrapInner('
').parent().find('td > div').slideDown(50, function() { var $set = jQuery(this); $set.replaceWith($set.contents()); }); }

você pode usar esses methods como:

 jQuery("[data-toggle-tr-trigger]").click(function() { var $tr = jQuery(this).parents(trClass).nextUntil(trClass); if($tr.is(':hidden')) { showTr($tr); } else { hideTr($tr); } }); 

Posso fazer isso se você definir os tds na linha para exibir nenhum ao mesmo tempo em que você começa a animar a altura da linha

 tbody tr{ min-height: 50px; } tbody tr.ng-hide td{ display: none; } tr.hide-line{ -moz-transition: .4s linear all; -o-transition: .4s linear all; -webkit-transition: .4s linear all; transition: .4s linear all; height: 50px; overflow: hidden; &.ng-hide { //angularJs specific height: 0; min-height: 0; } } 

Este código funciona!

           
Row 1
Row 2
Row 3
Row 4

http://jsfiddle.net/PvwfK/136/

 
A/C ID : 3000/A01
A/C ID : 3000/A01
A/C ID : 3000/A01

 $(function () { $(".table01 td").on("click", function () { var $rows = $('.content01'); if ($(".content01:first").is(":hidden")) { $("#header01").text("▲ Customer Details"); $(".content01:first").slideDown(); } else { $("#header01").text("▼ Customer Details"); $(".content01:first").slideUp(); } }); 

});

O plug oferecido por Vinny é muito próximo, mas eu encontrei e consertei alguns pequenos problemas.

  1. Ele atacou avidamente os elementos td além dos filhos da fila que estavam escondidos. Isso teria sido bom se tivesse procurado aquelas crianças ao mostrar a fileira. Enquanto isso se aproximava, todos eles acabaram com “display: none”, tornando-os ocultos.
  2. Ele não tinha como alvo os elementos filhos.
  3. Para células de tabela com muito conteúdo (como uma tabela aninhada com várias linhas), chamando slideRow (‘para cima’), independentemente do valor de slideSpeed ​​fornecido, ela reduziria a exibição da linha assim que a animação de preenchimento fosse concluída . Eu o corrijo para que a animação de preenchimento não seja acionada até que o método slideUp () na finalização seja concluído.

     (function($){ var sR = { defaults: { slideSpeed: 400 , easing: false , callback: false } , thisCallArgs:{ slideSpeed: 400 , easing: false , callback: false } , methods:{ up: function(arg1, arg2, arg3){ if(typeof arg1 == 'object'){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined'){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function'){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children('td, th'); $cells.wrapInner('
    '); var currentPadding = $cells.css('padding'); $cellContentWrappers = $(this).find('.slideRowUp'); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){ $(this).parent().animate({ paddingTop: '0px', paddingBottom: '0px' }, { complete: function(){ $(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents()); $(this).parent().css({ 'display': 'none' }); $(this).css({ 'padding': currentPadding }); } }); }); var wait = setInterval(function(){ if($cellContentWrappers.is(':animated') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function'){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } , down: function (arg1, arg2, arg3){ if(typeof arg1 == 'object'){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == 'string'){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == 'function'){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == 'undefined'){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == 'function'){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children('td, th'); $cells.wrapInner(''); $cellContentWrappers = $cells.find('.slideRowDown'); $(this).show(); $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); }); var wait = setInterval(function(){ if($cellContentWrappers.is(':animated') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == 'function'){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } } }; $.fn.slideRow = function(method, arg1, arg2, arg3){ if(typeof method != 'undefined'){ if(sR.methods[method]){ return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } } }; })(jQuery);

Correção Rápida / Fácil:

Use JQuery .toggle () para mostrar / ocultar as linhas onclick de uma linha ou uma âncora.

Uma function precisará ser escrita para identificar as linhas que você gostaria de ocultar, mas alternar cria a funcionalidade que você está procurando.