<?xml version="1.0"?> 

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 

<!DOCTYPE window> 


<window orient="vertical" style="border: 2px solid green"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<script>

   function collapseTag(id)
   {
     var row = window.document.getElementById(id);
	 row.setAttribute("collapsed","true");
   }

   function uncollapseTag(id)
   {
     var row = window.document.getElementById(id);
	 row.setAttribute("collapsed","false");
   }


</script>

    <hbox>
		<grid style="border: 2px solid red;" id="grid">
		   <columns id="columns1">
		      <column id="column1"/>
		      <column id="column2"/>
		      <column id="column3"/>
		   </columns>

		   <rows id="rows1" style="font-size: 24pt">
			 <row id="row1">
			    <text value="cell1"/>
			    <text value="cell2"/>
			    <text value="cell3"/>
			 </row>
 			 <row id="row2">
			    <text value="cell4"/>
			    <text value="cell5"/>
			    <text value="cell6"/>
			 </row>
			 <row id="row3">
			    <text value="cell7"/>
			    <text value="cell8"/>
			    <text value="cell9"/>
			 </row>
		   </rows>
		</grid>
    </hbox>
	<hbox>
	  <button label="collapse row 2"   oncommand="collapseTag('row2');"/>
	  <button label="uncollapse row 2" oncommand="uncollapseTag('row2');"/>
 	  <button label="collapse column 2"   oncommand="collapseTag('column2');"/>
	  <button label="uncollapse column 2" oncommand="uncollapseTag('column2');"/>

	</hbox>

</window>
