How to reveal hidden rows with jquery?

Question

I'm using footable (a jquery script for making tables responsive on mobiles, tablets etc) but i have a problem. Touching-Clicking on expand for every row is kind of unnecessary for my project.

Normally with this code it works:

 <table class="footable">
      <thead>
        <tr>
          <th data-class="expand">
            First Name
          </th>
          <th>
            Last Name
          </th>
          <th data-hide="phone,tablet">
            Job Title
          </th>
          <th data-hide="phone,tablet">
            DOB
          </th>
          <th data-hide="phone">
            Status
          </th>
        </tr>
      </thead>

$(function() { $('table').footable(); });

But How can i expand all rows as default ?

Example code on jsfiddle

Answer 1

Check this DEMO http://jsfiddle.net/yeyene/nZEu2/2/

Add this one line of script $('table tr').addClass('footable-detail-show'); after your footable call

$(document).ready(function(){
    $(function() {
        $('table').footable();
    });
    $('table tr').addClass('footable-detail-show');
});