Hiding columns - freezing

Hiding columns - freezing

Hello all.

I have a rather large table, so I will give you a shortened version for a sample. See below.

I have 3 types of columns and they are identified by their class (in the TD and TH)... they are
1. Always - cells that always appear - includes a primary key
2. Main - cells that are necessary to be shown, but can be toggled
3. Advanced - cells that are superfluous but helpful for the viewer.

I want the user to be able to toggle Main and Advanced as visible/invisible. I tried the below code, which works, but, but since there's so much data it will lock up the browser and even invokes this ff error:

"A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. Script: jquery-1.3.2.min.js:19"

My questions are basically, can this be done without freezing up the browser? (e.g. can I group columns together and hide each column, since I believe it's the sheer amount of cells that I am hiding?)

Thanks so much.

Here is my code:


here's my javascript (on top of jquery's inclusion)

<script type="text/javascript">

      $(document).ready(function() {
      
      $('a#toggleAdvanced').click(function()
      {
         $('td.advanced').toggle("fast");
         $('th.advanced').toggle("fast");
      
      });
      $('a#toggleMain').click(function()
      {
         $('td.main').toggle("fast");
         $('th.main').toggle("fast");
      
      });
      
      });


  </script>


here's my body code

<p><a href="#" id="toggleAdvanced">Toggle Advanced</p>
<p><a href="#" id="toggleMain">Toggle Main</p>



<table class="sortable" border="0">
   <thead>
      <tr>
         <th class="always">Data-1-Always</th>
         <th class="always">Data-2-Always</th>
         <th class="main">Data-1-Main</th>
         <th class="main">Data-2-Main</th>
         <th class="advanced">Data-1-Advanced</th>
         <th class="advanced">Data-2-Advanced</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th class="always">Data</th>
         <th class="always">Data</th>
         <th class="main">Data</th>
         <th class="main">Data</th>
         <th class="advanced">Data</th>
         <th class="advanced">Data</th>
      </tr>
      <tr>
         <th class="always">Data</th>
         <th class="always">Data</th>
         <th class="main">Data</th>
         <th class="main">Data</th>
         <th class="advanced">Data</th>
         <th class="advanced">Data</th>
      </tr>
      <tr>
         <th class="always">Data</th>
         <th class="always">Data</th>
         <th class="main">Data</th>
         <th class="main">Data</th>
         <th class="advanced">Data</th>
         <th class="advanced">Data</th>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td colspan=6>Footnote</td>
      </tr>
   </tfoot>
</table>