title: Datatables Jquery expand / collapse and animation
body: <p>I am using datatables plugin and currently the code I have expands / collapse when an image in the td is clicked but I would like to be able to click the row to expand please can anyone help with this? Here is the code:</p>
  
  <pre><code>            $(document).ready(function() {
              /*
               * Insert a 'details' column to the table
               */
              var nCloneTh = document.createElement( 'th' );
              var nCloneTd = document.createElement( 'td' );
              nCloneTd.innerHTML = '&lt;img src="../examples_support/details_open.png"&gt;';
              nCloneTd.className = "center";
  
              $('#example thead tr').each( function () {
                  this.insertBefore( nCloneTh, this.childNodes[0] );
              } );
  
              $('#example tbody tr').each( function () {
                  this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
              } );
  
              /*
               * Initialse DataTables, with no sorting on the 'details' column
               */
              var oTable = $('#example').dataTable( {
                  "aoColumnDefs": [
                      { "bSortable": false, "aTargets": [ 0 ] }
                  ],
                  "aaSorting": [[1, 'asc']]
              });
  
              /* Add event listener for opening and closing details
               * Note that the indicator for showing which row is open is not controlled by DataTables,
               * rather it is done here
               */
              $('#example tbody td').live('click', function () {
                  var nTr = this.parentNode.parentNode;
                  if ( this.src.match('details_close') )
                  {
                      /* This row is already open - close it */
                      this.src = "../examples_support/details_open.png";
                      oTable.fnClose( nTr );
                  }
                  else
                  {
                      /* Open this row */
                      this.src = "../examples_support/details_close.png";
                      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                  }
              } );
          } );
  </code></pre>
  
  <p>Secondly I would like the expand and collapse to be a smooth animation could someone advise me how to do that?</p>
  
  <p>Thanks</p>