Nested Tree Table Plugin For jQuery - cctt.js

File Size: 14.2 KB
Views Total: 7163
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Nested Tree Table Plugin For jQuery - cctt.js

cctt.js is a simple, lightweight, nested tree table plugin for jQuery that allows the users to collapse and expand hierarchical rows in your html table.

How to use it:

1. Include the jQuery cctt.js plugin's JavaScript and CSS files on the html page.

<script src="//"></script>
<link rel="stylesheet" href="jquery.cctt.css">
<script src="jquery.cctt.js"></script>

2. Initialize the plugin and we're ready to go.

$(function() {


3. A TR with class 'expanded' or 'collapsed' gets a fold-state indicator in TD with class 'control' and related behaviour.

<table class='cctt'>
    <tr class='cctt-collapsed'>
      <td class='cctt-control'>A.1</td>
    <tr style='display:none;'>
    <tr style='display:none;'>
    <tr class='cctt-expanded'>
      <td class='cctt-control'>A.2</td>
    <tr class='cctt-expanded'>
      <td class='cctt-control'>A3</td>

4. Decide whether or not to stop propagation on expand/collapse event

  stop_propagation: true

Change log:


  • JS cleanup.


  • added custom event cctt:toggle on folding/unfolding


  • added h3 folding


  • simplified calling of internal methods


  • Added option to prevent event propagation

This awesome jQuery plugin is developed by CapelliC. For more Advanced Usages, please check the demo page or visit the official website.