aCollapTable jQuery Plugin - Alvaro's Collapsable Table

aCollapTable is a jQuery plugin that will make your html tables collapsables.

How it Works

This plugin reads parent and children elements via the information stored in the data-id and data-parent attributes and uses it to set the row hierarchy of all our table rows inside a collapsable table.

e.g.

<table class="collaptable">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr data-id="1" data-parent="">
    <td>1</td>
    <td>Element 1</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="2" data-parent="1">
    <td>1.1</td>
    <td>Element 2</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="3" data-parent="1">
    <td>1.2</td>
    <td>Element 3</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="6" data-parent="3">
    <td>1.2.1</td>
    <td>Element 6</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="7" data-parent="3">
    <td>1.2.2</td>
    <td>Element 7</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="8" data-parent="3">
    <td>1.2.3</td>
    <td>Element 8</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="4" data-parent="">
    <td>2</td>
    <td>Element 4</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
  <tr data-id="5" data-parent="4">
    <td>2.1</td>
    <td>Element 5</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</td>
  </tr>
</table>

Usage

<script>
$(document).ready(function(){
  $('.collaptable').aCollapTable({ 
    startCollapsed: true,
    addColumn: false, 
    plusButton: '<span class="i">+</span>', 
    minusButton: '<span class="i">-</span>' 
  });
});
</script>

Options

startCollapsed: If it's true, the table is collapased at start. (Default: false)
addColumn: If it's true, the plus/minus button will be added like a column. (Default: true)
plusButton: The expand button ("plus" +). HTML allowed.
minusButton: The collapse button ("minus" -). HTML allowed.

Functions

Expand All

Using a link button or a button you can expand all the tree using "act-button-expand-all" as class

<a href="javascript:void(0);" class="act-button-expand-all">Expand All</a>

Collapse All

Using a link button or a button you can collapse all the tree using "act-button-collapse-all" as class

<a href="javascript:void(0);" class="act-button-collapse-all">Collapse All</a>

The previous demonstration code results in the following table

+ Expand - Collapse + Expand All - Collapse All

#	Name	Description
1	Element 1	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.1	Element 2	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.2	Element 3	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.2.1	Element 6	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.2.2	Element 7	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.2.3	Element 8	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2	Element 4	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2.1	Element 5	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3	Element 9	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3.1	Element 10	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3.2	Element 11	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.