Expanding/collapsing table rows while the text shortens/lengthens

Question

I have, for example, 3 rows from a table. Each of the rows gets its content from a database. By default when the row is collapsed, the text should be shortened -

trs[i].innerText = trs[i].innerText.substring(0,25) + '...';

When a user clicks on the div it expands, and if clicked again - collapses.

if(tr.style.height == "150px")
        {
             tr.style.height = "20px";
        }
    else {
        tr.style.height = "150px";
    }

So far, so good, but I want the text to be shortened only if the div is collapsed. With my solution when the page loads the text is shortened, but when the row is expanded it remains shortened. How can I fix this? I can only think of when the row expands to call an AJAX function which returns the original data, but I don't think it's the best possible way. Thanks in advance.

Answer 1

First you'd have to store the full text before shortening it.

trs[i].fullText = trs[i].innerText;
trs[i].innerText = trs[i].innerText.substring(0,25) + '...';

Then you can restore it in the handler:

tr.innerText = tr.fullText;
tr.style.height = "150px";

Here's a jsFiddle . I'm using jQuery to select the elements, but you already have the correct tr's anyway. If you were using jQuery you could also use $(tr).data("fullText", $(tr).text()) which avoids some minor memory leaks with adding properties to DOM elements in old versions of Internet Explorer.