How do i setup jQuery footables to show the toggle -

as question suggests cannot seem configure foo-tables, in basic way - 3 columns, last column toggle shows detail row. markup code thus:

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

.footable {    font-size: 88%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <table class="table footable fw-labels" data-page-navigation=".pagination" data-page-size="6">      <thead>      <tr>        <th>action</th>        <th data-toggle="true">details</th>        <th data-hide="all">details</th>      </tr>    </thead>      <tbody>        <tr class="row-primary">        <td><span class="label label-primary">primary</span>        </td>        <td>this footable expandable <b class="text-primary">"primary"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-primary&quot;&gt;</code>        </td>      </tr>        <tr class="row-info">        <td><span class="label label-info">info</span>        </td>        <td>this footable expandable <b class="text-info">"info"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-info&quot;&gt;</code>        </td>      </tr>        <tr class="row-success">        <td><span class="label label-success">success</span>        </td>        <td>this footable expandable <b class="text-success">"success"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-success&quot;&gt;</code>        </td>      </tr>        <tr class="row-warning">        <td><span class="label label-warning">warning</span>        </td>        <td>this footable expandable <b class="text-warning">"warning"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-warning&quot;&gt;</code>        </td>      </tr>        <tr class="row-danger">        <td><span class="label label-danger">danger</span>        </td>        <td>this footable expandable <b class="text-danger">"danger"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-danger&quot;&gt;</code>        </td>      </tr>        <tr class="row-alert">        <td><span class="label label-alert">alert</span>        </td>        <td>this footable expandable <b class="text-alert">"alert"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-alert&quot;&gt;</code>        </td>      </tr>        <tr class="row-system">        <td><span class="label label-system">system</span>        </td>        <td>this footable expandable <b class="text-system">"system"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-system&quot;&gt;</code>        </td>      </tr>        <tr class="row-dark">        <td><span class="label label-dark">dark</span>        </td>        <td>this footable expandable <b class="text-dark">"dark"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-dark&quot;&gt;</code>        </td>      </tr>        <tr class="row-primary">        <td><span class="label label-primary">primary</span>        </td>        <td>this footable expandable <b class="text-primary">"primary"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-primary&quot;&gt;</code>        </td>      </tr>        <tr class="row-info">        <td><span class="label label-info">info</span>        </td>        <td>this footable expandable <b class="text-info">"info"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-info&quot;&gt;</code>        </td>      </tr>        <tr class="row-success">        <td><span class="label label-success">success</span>        </td>        <td>this footable expandable <b class="text-success">"success"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-success&quot;&gt;</code>        </td>      </tr>        <tr class="row-warning">        <td><span class="label label-warning">warning</span>        </td>        <td>this footable expandable <b class="text-warning">"warning"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-warning&quot;&gt;</code>        </td>      </tr>        <tr class="row-danger">        <td><span class="label label-danger">danger</span>        </td>        <td>this footable expandable <b class="text-danger">"danger"</b> row</td>        <td>you can use style formatting table row <code>&lt;tr class=&quot;row-danger&quot;&gt;</code>        </td>      </tr>      </tbody>    <tfoot class="footer-menu">      <tr>        <td colspan="5">          <nav class="text-right">            <ul class="pagination hide-if-no-paging"></ul>          </nav>        </td>      </tr>    </tfoot>  </table>

i have example template got code works - in actual app im building third row should hidden until toggled un-rendered , shows third column. setup follows:

• footable - version : 2.0.3
• jquery-1.11.1
• jquery ui - v1.11.0 - 2014-06-26
• chrome : version 46.0.2490.80 m

any pointers appreciated - in advance. btw have correct footables css file referenced in app (not shown in code snippet above)

found solution here : footable in bootstrap 3 not initializing

(so please stop stampede answer ;¬) )

thanks