collapsible/expandable table behaviour
<p>need help with some jquery/js/jsp functionality..</p>

<p>I have a collapsible table script:</p>

<pre><code>(function($){ 
 $.fn.extend({  
     setupCollapstable: function(options) { 
         var defaults = { 
                displayStyle: "Image",
                autoCheckbox: true,
                toggleMinus: "/resource/images/collapse_close.gif",
                togglePlus: "/resource/images/collapse_open.gif"
        }; 

        var options = $.extend(defaults, options);

        var toggleMinus = options.toggleMinus 
        var togglePlus = options.togglePlus

        return this.each(function() { 

            //Creating a reference to the object 
            var obj = $(this);

            //Break out the individual tbody elements
            var rowGroups = $('tbody', obj);

            //Loop through every tbody to setup collapsable and click events
            $.each( rowGroups, function( intIndex, objValue ){

                parentRow = $('th:first-child', objValue);
                childCount = parentRow.parent().siblings().length;

                if (childCount != 0) {
                    //console.log ("ParentRow: " + parentRow + " - ChildCount is: " + childCount);

                    parentRow.prepend('&lt;img src="' + togglePlus + '" alt="collapse this section" /&gt;');

                    parentRow.parent().siblings().fadeOut('fast');

                    $('img', parentRow).addClass('clickable').click(function(e) {
                        e.preventDefault();
                        var toggleSrc = $(this).attr('src');

                        if ( toggleSrc == toggleMinus ) {
                            $(this).attr('src', togglePlus).parents('tr').siblings().fadeOut('fast');
                        } else{
                            $(this).attr('src', toggleMinus).parents('tr').siblings().fadeIn('fast');
                        };
                    });

                    var parentCheckbox = $(':checkbox', parentRow.siblings())

                    var childCheckboxes = $(':checkbox', parentRow.parent().siblings());

                    parentCheckbox.click(function(e){

                        var checked_status = parentCheckbox.attr('checked')?1:0;

                        childCheckboxes.each(function(){
                            this.checked = checked_status;          
                        });
                    });

                } else {
                    parentRow.addClass("indented");
                }

            });
                //console.dir (objValue);

        }); 
    } 
}); 
})(jQuery);
</code></pre>

<p>From my JSP I call it as such....</p>

<pre><code>&lt;script type="text/javascript" src="/resource/js/jquery.collapstable.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
        $(document).ready(function(){
            $('table.collapstable').setupCollapstable();
        });
     &lt;/script&gt;
</code></pre>

<p>usage:</p>

<pre><code>&lt;table class="collapstable NoTableBorder"&gt;
</code></pre>

<p>when I click on the image icon the table properly collapses and expands, however I want it to be initially expanded if a certain checkbox is checked (on the JSP).</p>

<p>so I would have an onclick="showOrHide()" function for that checkbox input which would collapse or expand the table.</p>

<p>i've attached an image to for a visual representation, the collpase table is the "+/-" icon (next to the bold VISA header) while the checkbox which decides if it should be expanded for shown is the "active" checkbox..
<img src="http://i.stack.imgur.com/Xh4P0.jpg" alt="collapse"></p>

<p>any help with this would be amazing...</p>
