Hierarchical Table with HTML and Jquery

[krs]

I am trying to create Hierarchical Table with HTML and Jquery. In my attachment if I click
check box I want to see maingroup1 and main group2.when I click maingroup1 I want to display
subgroups toggle.can somebody help with the design and script. i have it in fiddle also.Main group 1 and main group 2
should be in the same level.

Maingroup1 has subgroup1 and subgroup2.subgroup2 has aubgroup3.when i click the parent group
child group should toggle.Can some body help with some generic code.I am creating this as template
finally I want to create like this with real data in server side(HTML structure) and manipulate with jquery.
http://jsfiddle.net/qyp42/.IF the html structure has to be changed also its ok.
I am targetting IE 8.0

Thanks.

[Deadweight]

So are you trying to make each subgroup toggle?

[krs]

Yes.Also when I click MainGroup1 all the subgroups should be toggled showing only maingroup1 and maingroup2.maingroup2 also will have subgroups.so when i clcik maingroup1 or maingroup2 i think
we should pass param to toggle specific group.

[Deadweight]

One more thing, if you hit maingroup1 do you want the first subgroup to show or do you always want the subgroup headers to show?

[krs]

let the subgroup headers show when you click subgroup headers let the details show.I think we should have some common function passing id or class or any identifier of maingroup or subgroup for toggle.so that when we have subgroups in maingroup2 we can
use the same function.

[Deadweight]

Alright im almost finished. I'll post the test page to you as an inbox.

[krs]

ok.if you want you can put in jsfiddle also.

[Deadweight]

FYI I'm finished:
http://jsfiddle.net/qyp42/2/

I think that is what you are wanting.

FYI you can set up the tables any way you would like I just wanted to show an example with two different tables.

The way i did it way labeling the first TR as '.drop_row' then the functions do the rest. Also, i think with my way you could actually place a table inside a table (in a row under it) and actually hide the whole table. If you want an example of that let me know. Also, i am sending you a PM.

OH and yes this does work in IE8 also.

[krs]

HI,
Thx Can you check the http://jsfiddle.net/qyp42/4/ I updated little bit.
if you see when i click expand/collapse I am showing only the main tables (Info1,info2,info3)also In my updated design
I have a table with class sub_table1 actually I want that to be the child of previous info table.it's like info2 has one info sublevel and that is having another sublevel.
And also when i click info1,info2,info3(main tables) I like to show all subtables below it.right now it's not showing.If you think making a table inside a table will
give a better look like hierarchy then that also fine.

http://jsfiddle.net/qyp42/4/

[Deadweight]

I'll fix it for you.
All your tables that you want to expand on click add the class 'drop_row' to the first '<tr>'.

If you want to change the layout of any of the other tables eg. 'sub_table' just add it to the '<table>' also you don't have to use my colors or anything.
All you have to do to allow the click is add 'drop_row' to the first '<tr>' in the '<table>' you would like to use.

http://jsfiddle.net/qyp42/6/

Also, you couldn't see the other table because of your 'margin-right:400px' so i removed it and deleted the thing you added to the code. Ill throw in a table in a table to show that this still works.