slideToggle in table row

Question

does slideToggle work with table?

I want to slideToggle a row of a table. but it just appears without any effect.

Thermomagnetic

Answer 1

SlideToggle does work with table rows, it just kind of sucks.

If you have a table row with a height larger than it's minimum - like this

<tr height="30%">

Then slidetoggle will do a smooth slide down until the reaches it's minimum height... then it will dissapear immediately like you used

$("#tr").hide();

I've made a jsfiddle demonstrating this at http://jsfiddle.net/BU28E/1/

A better solution for you may be to use a table made out of divs. Divs will slide up very smoothly. I made another jsfiddle demonstrating this at http://jsfiddle.net/BU28E/2/

Tbar

thanks for your explanation,so the tr have some issue with slide effect.how can i solve it? i can't get tr any height.its height is defined by its content. – Thermomagnetic

Right. I don't know of any way to make a <tr> slide down. At least in chrome, there heights will NOT go lower than the minimum to show content. My solution was to use <div>s. I posted a jsfiddle above, but here is the link again: jsfiddle.net/BU28E/2 – Tbar

Answer 2

What I do is put a single DIV in the row and set padding of the TR and TD to zero. Then I can slide-toggle the div instead of the row:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

Works great. I think you could put a DIV in each column and slide-toggle them simultaneously if you need that.

Forint

this almost works except that the row and/or cell reserves the space for the div, so the the reserved space just pops in and the div slides into it, rather than the table sliding larger. – Leisured

Ya, I wouldn't say this works great because the space is reserved, and even if you set row height to 0 the slide animation still stutters. – Asymmetric

Answer 3

I don't know if this workaround is considred and effecient way, but it worked for me :

say that you want to slideUp the first row of a table (this code will slideUp the header) :

$('table tr').first().children().slideUp();

so, basically, you would like to slide up the Row children instead of the row itself :)

Beulahbeuthel

Answer 4

Try using

$("#tr").fadeToggle(1000) 

for a similar effect

Bondswoman

Answer 5

You can do this by setting the tr you want to slide to display:none; then inside that tr add a td with colspan equaling the amount of columns your table has with a div that also is set as display:none inside that td.

All content you want in the sliding row goes into the aforementioned div, resulting in a tr that slides with animation.

The below snippet shows this in action.

$(".accordion-row").on("click",
  function() {
    var accordionRow = $(this).next(".accordion");
    if (!accordionRow.is(":visible")) {
      accordionRow.show().find(".accordion-content").slideDown();
    } else {
      accordionRow.find(".accordion-content").slideUp(function() {
        if (!$(this).is(':visible')) {
          accordionRow.hide();
        }
      });
    }
  });

.accordion-row {
  cursor: pointer;
}

.accordion {
  display: none;
  width: 100%;
}

.accordion-content {
  display: none;
}


/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>
        th1
      </th>
      <th>
        th2
      </th>
      <th>
        th3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="accordion-row">
      <td>
        tr1 td1
      </td>
      <td>
        tr1 td2
      </td>
      <td>
        tr1 td3
      </td>
    </tr>
    <tr class="accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr1 accordion-content
        </div>
      </td>
    </tr>
    <tr class="accordion-row">
      <td>
        tr2 td1
      </td>
      <td>
        tr2 td2
      </td>
      <td>
        tr2 td3
      </td>
    </tr>
    <tr class=" accordion">
      <td colspan="3">
        <div class="accordion-content">
          tr2 accordion-content
        </div>
      </td>
    </tr>
  </tbody>
</table>

Rousing

Answer 6

I came up with a bit of a workaround to the issue of not being able to slide table rows. This code only works if your table contents are completely text. This could be adjusted to support other things (images, etc.) with some work. The idea is that the row will only shrink until it reaches the size of its content. So, if you can shrink the content when needed, the slide will continue.

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
    $('#1').slideUp({
        duration: 1500,
        step: function(){
            var $this = $(this);
            var fontSize = parseInt($this.css("font-size"), 10);

            // if the real and css heights differ, decrease the font size until they match
            while(!sameHeight(this) && fontSize > 0){
                $this.css("font-size", --fontSize);
            }
        }
    });
});

function sameHeight(el){
    var cssHeight = el.style.height;
    cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
    var realHeight = $(el).innerHeight();

    return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

The effect is slightly different, in that the content shrinks as opposed to the normal slide effect.

the < 2 in the last line may need to be adjusted based on your borders (and possibly other factors). Also, this only demonstrates hiding the content. A similar approach would be needed to allow the font size to grow as the row slid down. This is more of a proof of concept.

Sweatbox

Answer 7

Edit: After trying Jonatan's answer, his method looks quite a bit cleaner.

Here I have a table row with the class view-converters which, when clicked, will show/hide all divs with the class TCConverters.

My rows look like this:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Here's the code that runs when you click view-converters.

I didn't do anything special with the padding of the table cells.

Note that we hide the table row when we are done animating the slide.

$(".view-converters").click(function() {
    if(!$(".TCConverters:first").is(":visible")) {
        $(".TCConverters").parent().parent().show();
    }
    $(".TCConverters").slideToggle(200,function() { 
        if(!$(this).is(":visible")) {
            $(this).parent().parent().hide();
        }
    });
});

It looks like this:

Original:

Here I have a table row with the class view-converters which, when clicked, will show/hide all rows with the class TCConverters:

You can adjust the speed by changing the hacky initial value and the increment in each .each.

This doesn't stretch the rows as nicely as a slide toggle, but the effect worked for my purposes.

If you really want to squeeze the row height, you can likely just animate it yourself by replacing param.hide() with a setTimeout that shrinks the height until it reaches 0.

$(".view-converters").click(function() {
    var hacky = 50;
    if($('.TCConverters:first').is(':visible')) {
        $('.TCConverters').each(function() {
            var param = $(this);
            setTimeout(function() { param.hide(); },hacky);
            hacky += 5;
        });
    }
    else {
        $($('.TCConverters').get().reverse()).each(function() {
            var param = $(this);
            setTimeout(function() { param.show(); },hacky);
            hacky += 5;
        });
    }
});

It looks like this:

Vinaya

Answer 8

hi this will works smooth

 const slideTr = (".table-row");
    if ($(slideTr).css("display") == "none") {
      $(slideTr).slideDown("slow");
      $(slideTr).find("td").contents().slideDown("slow");
    } else {
      $(slideTr).find("td").contents().slideUp("slow");
      $(slideTr).slideUp("slow");
    }

Mithras

Answer 9

You can slide toggle of a row in the table . Please try this

The Html code of a table:

<a href="#" >ok</a>
<table id="tbl">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    <tr><td>6</td><td>5</td></tr>
</table>

The jQuery code is here on click of "a" href, the table will be toggled.

$(document).ready(function() {
    $("a").click(function() {
        $('table tr td').slideToggle("medium");
    });           
});

For particular index row you can use $('table tr:eq(rowindex) td').

Pung