Collapse Expand Inside textArea

[ghtvnath]

i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

var channelsGroups = new Array();
var channelsChildren = new Array();
channelsGroups[0]= new Array('Mars Public', 'MARS-PUB');
channelsChildren[0]=new Array();
channelsGroups[1]= new Array('Mars Private', 'MARS-PRIVA');
channelsChildren[1]=new Array();
channelsGroups[2]= new Array('Internet Booking Engine', 'IBE');
channelsChildren[2]=new Array();
channelsGroups[3]= new Array('mars Private Agent Specific', 'M-P-AGENT');
channelsChildren[3]=new Array();
channelsChildren[3][0]=new Array('AGT_002',' AGT_002 ');
channelsChildren[3][1]=new Array('CARLSON WAGONLIT AUSTRALIA PTY',' 235830 ');
channelsChildren[3][2]=new Array('Travel Zone',' TRAVELZONE ');
channelsChildren[3][3]=new Array('Worldlink Travels',' WORLDLINK ');
channelsChildren[3][4]=new Array('AAAAAAARFDS',' ADM2 ');
channelsChildren[3][5]=new Array('AAASSRet',' DMM3 ');
channelsChildren[3][6]=new Array('Adrian Travels',' DMM1 ');
channelsChildren[3][7]=new Array('Buraha Travels',' DMM2 ');
and more

Output in the textArea is as following
i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

Mars Public
Mars Private
Internet Booking Engine
mars Private Agent Specific
-AGT_002
-CARLS...

I hope you inderstand the pattern. I want first to display only the groups(Mars Public, Mars Private) and when someone clicks on mars private Agent specific, the list of agents appear. There are other groups below agents and those groups also may have children.Those groups also should have the same on click functioanlity? Any Idea?

Thank you in advance...