TOGGLE for JQUERY
<p>here in this code.
i have a file from xml that loads on jqgrid. </p>

<p>in my xml i have a parTable (which is the parent table) and chTable (for the sub items)
now here is my problem. If i click on the parTable(item) i want to expand all the details 
in the chTable(subitems). </p>

<hr>

<pre><code>$(function() {
        'use strict';
        $("#table1").jqGrid({
            url: 'Cost Codes Internal.xml',
            datatype: "xml",
            height: 'auto',
            colModel: [
                { name: 'Sample1', width: 150, xmlmap: function(obj) {
                    return $(obj).find("Sample1").first().text();
                }
                },
                { name: 'Sample2', width: 800, xmlmap: function(obj) {
                    return $(obj).find("Sample2").first().text();
                }
                },
                { name: 'Sample3', width: 100, xmlmap: function(obj) {
                    return $(obj).find("Sample3").first().text();
                }
                },

            ],
            xmlReader: {
                root: "table1&gt;parTable",
                row: "Data",
                repeatitems: false,

                subgrid: {
                    root: "table1&gt;parTable&gt;chTable",
                    row: "Data",
                    repeatitems: false
                }
            },
            loadonce: true,
            rowNum: 1000
        });
    });
</code></pre>

<hr>

<p>i tried to use this for the toggle for my parTable</p>

<pre><code> $("chTable span.expand").click(function() {
            $(this).parents("parTable.main").nextUntil("parTable.main").toggle(); 
</code></pre>
