slideToggle in table row

does slideToggle work with table?

I want to slideToggle a row of a table.开发者_运维技巧 but it just appears without any effect.

---

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/

---

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.

---

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 :)

---

Try using

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

for a similar effect

---

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>

---

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.

---

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:

---

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");
    }

---

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').