title: DataTable slidedown row.child()
body: <p>I want to slide-down a div for each row when button is clicked. Currently dataTable row.child() calls format function in this form.</p>
  
  <p>Refer fiddle: <a href="http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/" rel="nofollow noreferrer">http://jsfiddle.net/dhirajbodicherla/189Lp6u6/16/</a></p>
  
  <pre><code>function format ( d ) {
    return '&lt;div class="slider"&gt;Test Message&lt;/div&gt;';
  }
  </code></pre>
  
  <p>Is it possible to return div for each row as like below</p>
  
  <pre><code>&lt;div class="slider"&gt;Test Message&lt;/div&gt;
  
  function format(d){
    return $('div.slider');
  }
  </code></pre>
  
  <p>Finally the jQuery looks like this.</p>
  
  <pre><code>$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
  
    if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
    }
  });
  </code></pre>