CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
Ila
Ila

Reputation: 3538

Use JQuery showToggle or other method to linear animate show/hide of group of table rows

I have a table displaying data associated with many objects, with two levels of show/hide content, "show_top_categories" and "show_sub_categories": 

<table>
    <thead class="toggle" data-expand="show_top_categories">
    <tr>
        <th class="column1">Cases</th>

    </tr>
    </thead>
    <tbody class="show_top_categories">
    <tr>
        <td class="column1">Title</td>
        <td>Title of case 1</td>
        <td>Title of case 2</td>
        <td>Title of case 3</td>
    </tr>
    <tr>
        <td class="column1">Description</td>
        <td>Description of case 1</td>
        <td>Description of case 2</td>
        <td>Description of case 3</td>
    </tr>
    <tr>
        <td class="column1">Summary</td>
        <td>Summary of case 1</td>
        <td>Summary of case 2</td>
        <td>Summary of case 3</td>
    </tr>
    <tr class="toggle" data-expand="show_sub_categories">
        <td class="column1">Show All ></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="show_sub_categories">
        <td class="column1">Diskussion</td>
        <td>Comments 1</td>
        <td>Comments 2</td>
        <td>Comments 3</td>
    </tr>
    <tr class="show_sub_categories">
        <td class="column1">Views</td>
        <td>Views 1</td>
        <td>Views 2</td>
        <td>Views 3</td>
    </tr>
    </tbody>
</table>

I'm using a linear animation to smoothly display tbody "show_top_categories":

  $(".toggle").click(function() {
            var target = $(this).attr("data-expand"),
                targetid = "." + target;
            $(targetid).slideToggle(300, 'linear');
        });

However, because there is no parent grouping of the "show_sub_categories" table rows, I can't get a linear transition working on the subcategories.

Here's a JSFIDDLE showing what I mean. Clicking "Case" smoothly animates show/hide of the categories, but clicking "Show More >" causes a jerky show/hide of the table rows beneath.

Is there any way to get a linear animation to work across a number of table rows like this, or is there any other way to group the rows beneath the sub-categories toggle so that they animate together?

Upvotes: 0

Views: 352

Answers (1)

Ila
Ila

Reputation: 3538

Wow, speed record for me figuring (part of) the answer straight after asking the question:

If I make the TRs block elements, like so: 

  tr {
    display: block;
  }

then they will take a linear animation. It's not perfectly what I'm looking for, but it's close.

Update JSFiddle: http://jsfiddle.net/LaWaW/2/

Upvotes: 0

Related Questions