Demo for an SO answer

SO answer: http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery

by Lijo

HTML

<div>
    <br/>
    
    
    <input type="submit" value="Show Associate" class="btnAssociate" />   
    <input type="submit" value="Show Financial" class= "btnFinancial"/>
    
    <br/>
    
    <table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTransactions"
        style="border-collapse: collapse;">
        <tr>
            <th scope="col">
                &nbsp;
            </th>
            <th colspan='4' class='tableColGroupAssociate'>
                Associate Info <a href='#' class="associateHide">Hide <a>
            </th>
            <th colspan='5' class='tableColGroupTransaction'>
                Financial Info <a href='#' class="financialHide">Hide 
            </th>
        </tr>
        <tr class=''>
            <th>
                Line #
            </th>
            <th scope="col">
                EmpID
            </th>
            <th scope="col">
                SID
            </th>
            <th scope="col">
                First&#160;Name
            </th>
            <th scope="col">
                Last&#160;Name
            </th>
            <th scope="col">
                Type
            </th>
            <th scope="col">
                App ID
            </th>
            <th scope="col">
                Batch ID
            </th>
            <th scope="col">
                Correlation&#160;ID
            </th>
            <th scope="col">
                Transaction ID
            </th>
        </tr>
        <tr>
            <td>
                1
            </td>
            <td>
                123
            </td>
            <td>
                1234
            </td>
            <td>
                Sandy
            </td>
            <td>
                Taylor
            </td>
            <td>
                P Adj
            </td>
            <td>
                1
            </td>
            <td>
                <a id="detailContentPlaceholder_grdTransactions_HyperLink1_0"...

CSS

.btnAssociate,
.btnFinancial
{
    display:none;
}

td
{
    margin: 0 10px 0 10px;
    border: 1px solid blue;
}

th
{
    margin: 0 10px 0 10px;
    border: 1px solid blue;
    font: bold 12pt Arail;
}

JavaScript

var associateStartElementString = "EmpID";
var financialStartElementString = "Type";

var associateHTMLElements;
var financialHTMLElements;

var associateHideClass = '.tableColGroupAssociate';
var financialHideClass = '.tableColGroupTransaction';

$(document).ready(function () {

   
    
    
    ////////Hide Sections


    //Associate Hide
    $('.associateHide').live("click", function (e) {
        e.preventDefault();

             
        var hideClass = associateHideClass; 
        associateHTMLElements = HideSection(hideClass, associateStartElementString);
        
        $('.btnAssociate').show();

    });

    //Financial Hide
    $('.financialHide').live("click", function (e) {
        e.preventDefault();

      var hideClass = financialHideClass ;
                 
        financialHTMLElements = HideSection(hideClass, financialStartElementString);
        
        $('.btnFinancial').show();

    });

    
    ////SHOW 
    $('.btnAssociate').click(function()
    {
        associateHTMLElements.show();
        
          var firstHeaderLineElement = $(".resultGridTable").find(associateHideClass );
        
        firstHeaderLineElement.show(); 
                
    });
    
    
    $('.btnFinancial').click(function()
    {
        financialHTMLElements.show();
        
          var firstHeaderLineElement = $(".resultGridTable").find(financialHideClass );
        
        firstHeaderLineElement.show(); 
                
    });
    
    
    
    //Function 1
    function HideSection(hideClass, startElementString) 
    {

    var htmlElement = GetTableSections(hideClass, startElementString);
        
    var firstHeaderLineElement = $(".resultGridTable").find(hideClass);

    var variableToSet;

    if (!(htmlElement === undefined)) {

        variableToSet = htmlElement;
        htmlElement.hide();
        firstHeaderLineElement.hide();
    }

    return variableToSet;
   }


//Function 2
function GetTableSections(hideClass,...