html table collapse,html - expand/collapse table rows with JQuery - Stack Overflow

I expanded one of the answers, however my functionality is a bit different. In my version, different rows form different groups. And "header" row triggers collapsing/expanding of that particular group. Also, each individual subgroup memorizes state that its in. It might sound a bit confusing, you can test drive my version using jsfiddle. Hope this code snippets will be helpful to someone out there!

HTML

Header 1	Header 2
Group 1	data 2
data 3	data 4
Group 2	data 2
data 3	data 4
Sub Group 1	data 6
data 7	data 8
data 9	data 10
Sub Sub Group 1	data 11
data 12	data 13
data 14	data 15
Sub Group 2	data 11
data 12	data 13
data 14	data 15

CSS

table, tr, td, th

{

border: 1px solid black;

border-collapse:collapse;

}

img.button_open{

content:url('http://code.stephenmorley.org/javascript/collapsible-lists/button-open.png');

cursor:pointer;

}

img.button_closed{

content: url('http://code.stephenmorley.org/javascript/collapsible-lists/button-closed.png');

cursor:pointer;

}

JS

function CreateGroup(group_name)

{

// Create Button(Image)

$('td.' + group_name).prepend(" ");

// Add Padding to Data

$('tr.' + group_name).each(function () {

var first_td = $(this).children('td').first();

var padding_left = parseInt($(first_td).css('padding-left'));

$(first_td).css('padding-left', String(padding_left + 25) + 'px');

});

RestoreGroup(group_name);

// Tie toggle function to the button

$('img.' + group_name).click(function(){

ToggleGroup(group_name);

});

}

function ToggleGroup(group_name)

{

ToggleButton($('img.' + group_name));

RestoreGroup(group_name);

}

function RestoreGroup(group_name)

{

if ($('img.' + group_name).hasClass('button_open'))

{

// Open everything

$('tr.' + group_name).show();

// Close subgroups that been closed

$('tr.' + group_name).find('img.button_closed').each(function () {

sub_group_name = $(this).attr('class').split(/\s+/)[0];

//console.log(sub_group_name);

RestoreGroup(sub_group_name);

});

}

if ($('img.' + group_name).hasClass('button_closed'))

{

// Close everything

$('tr.' + group_name).hide();

}

}

function ToggleButton(button)

{

$(button).toggleClass('button_open');

$(button).toggleClass('button_closed');

}

CreateGroup('group1');

CreateGroup('group2');

CreateGroup('sub_group1');

CreateGroup('sub_group2');

CreateGroup('sub_sub_group1');