HTML jquery collapsable tables

Question

I've been working on this for a bit and I cant quite make this behave the way I want it.

Basically What I need is a way to keep all "text" cells the same size on page load and if they have more text then can fit in the cell add an ellipse (...). Then when you click on the cells that have the ellispe they will expand allowing you to read the entire text rather then the portion showing.

Here is a jsfiddle that I did that shows the problem: http://jsfiddle.net/7ugmx/1/

<table class="table" style="margin:0;">
    <tr>
        <th width="10%" style="border-top:0;">Id</th>
        <th style="border-top:0;">Text</th>
        <th width="10%" style="border-top:0;">Data</th>
    </tr>
</table>
<div class="data">
    <table class="table table-striped">
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updatestesting updatestesting updatestesting updatestesting updates /* SNIP */</td>
            <td width="10%">2014-02-02 18:01:14</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
    /* SNIP */

    </table>
</div>

Here is the jquery script I created.

  $(".slide").click(function () {
      $(this).slideToggle(200);
  });

As you can see on jsfiddle, the entire text cell starts out normal sized, and when clicked, vanishes all together.

Is it possible to have the cell start minimized showing 1 line of text, and then maximize showing its entirety on click?

Thanks for any help.

I'm not sure how to implement what you want but `.slideToggle()` is not the way to do it. `.slideToggle()` basically hides or shows the element based on what it's `display:` property is set to. So if the property is displayed when the page is loaded, it will be hidden upon click with a sliding effect. — , Feb 03 '14 at 09:04
You can't animate height on table cells (or rows), because `height` on a table-cell is calculated as `min-height` http://stackoverflow.com/a/920480/833146 — xec, Feb 03 '14 at 09:11

Goran.it · Accepted Answer · 2014-02-03T09:52:04.107

0

Its possible, here is one resolution:

/* CSS */
.slide {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
/* JS */
      $(".slide").click(function () {
          $(this).toggleClass('slide');
      });

And working example : JSFIDDLE

[EDIT]

Here is a example with wrapped cells and fixed div width as described in comment : SECOND EXAMPLE

edited Feb 03 '14 at 09:52

answered Feb 03 '14 at 09:06

Goran.it

5,991
2
23
25

This is almost working! Is it possible to make it only maximize the slide you click on. I added three large texts to my project and they all open and close at the same time. Also it seems that somewhere it has managed to push my Data column off so it does not line up anymore (unless you maximize it which then it does again). Is there a way to shorten the Text column to make it align again? Here is a jsfiddle showing the problem. Thanks for your help! http://jsfiddle.net/84V2t/ – randy newfield Feb 03 '14 at 09:22
You need to wrap contents of the td in a div tag and give it a width .. I've expanded the answer above with second working example .. – Goran.it Feb 03 '14 at 09:51
Thank you this is working beautifully now. I just need to figure out how to set the td div to use the maximum space between the first td and the second td via auto or percentage so it resizes with browser size. Coming from a C/Ruby background to this was harder then I thought. – randy newfield Feb 03 '14 at 19:13

score 0 · Answer 2 · answered Feb 03 '14 at 14:57

I'm throwing this out just as an idea/thought. FIDDLE

Instead of a slider, I use a jQuery dialog as a popup that opens with the contexts of the td/div that is clicked on. On mouseout, it closes.

JS

var popupdialog = $('#popupdialog').dialog({
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    position: {my: 'top right',
               at: 'middle left',
               of: '.hidden'}
                                  });
$('.table td div').click(function(){
       popupdialog.dialog('open');
       var cloneme = $(this).clone();
       $('#popupdialog').html(cloneme);

});
$('.table td div').mouseout(function(){
       $(this).css('background-color', 'transparent');
       popupdialog.dialog('close');

});

HTML jquery collapsable tables

2 Answers2