jQuery Collapser在DIV中隐藏或显示内容

Question

My question is related with " jQuery – Collapser plugin " ( http://www.aakashweb.com/jquery-plugins/collapser/ ):-

I am using the following script to hide or show content inside the DIV with CLASS name 'shrink'. It works fine.

<script type="text/javascript">
$(document).ready(function() {
    $('.shrink').collapser({
        mode: 'words',
        truncate: 80,
        ellipsis: ' ... '
    });
});
</script>

But, In the BODY I use a javascript to print some content inside DIV with a table to hide or show content inside <tr><td><div class="shrink"></div></td></tr> . Now, hide or show content does not works. ( sample script is given below, Note: There is no line break. It is just for explanation only. )

<script type="text/javascript">
var dataTable = document.getElementById('Result');
var content = "<table class='tablesorter'>
<thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>123</td>
    <td><div class='shrink'>Some long content....</div></td>
  </tr>
</tbody>
</table>";
dataTable.innerHTML = content;
</script>

<div id="Result"></div>

Also, I tried with a simple statement as below. It does not works.

var content = "<div class='shrink'>Some long content....</div>";

Answer 1

you have to be careful with line breaks in javascript strings. note how syntax highlighting stops on the second line. you have to either escape them or concat them.

escaping..

var content = "<table class='tablesorter'>\
<thead>\
  <tr>\
  ....
</table>";

Note that if you escape thelinebreaks, there can't be any trailing spaces after the \\ .

concatting..

var content = "<table class='tablesorter'>"+
"<thead>"+
  "<tr>"+
  ....
"</table>";

Answer 2

<script type="text/javascript">
function shrink() {
  $('.shrink').collapser({
    mode: 'words',
    truncate: 80,
    ellipsis: ' ... '
  });
}
function display () {
  var dataTable = document.getElementById('Result');
  var content = "<table class='tablesorter'>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td><div class='shrink'>Some long content....</div></td>
    </tr>
  </tbody>
  </table>";
  dataTable.innerHTML = content;
}
setTimeout(function(){ display(); shrink(); }, 1000);
</script>

<div id="Result"></div>