title: collapsible/expandable table behaviour
body: <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="https://i.stack.imgur.com/Xh4P0.jpg" alt="collapse"></p>
  
  <p>any help with this would be amazing...</p>