Javascript or jQuery passing ID values to show or hide a selected Div

Question

I have a table which is outlined below, this is generated from an old XML file using XLST, to style the page, these files "CANT" be modified by myself, but all have a general template base to them... and all use the goTab() function to show or hide a specific div

<table cellspacing="0" cellpadding="0">
<tr>
<td class="tab_active" id="tab_1" onclick="goTab(1)">Key Messages</td>
<td class="tab" id="tab_2" onclick="goTab(2)">Links</td>
<td class="tab" id="tab_3" onclick="goTab(3)">Red Flags</td>
<td class="tab" id="tab_4" onclick="goTab(4)">Referral Pathway</td>
<td class="tab" id="tab_5" onclick="goTab(5)">Clinical Data</td>
<td class="tab" id="tab_6" onclick="goTab(6)">Past Medical / Family History</td>
<td class="tab" id="tab_7" onclick="goTab(7)">Medication</td>
<td class="tab" id="tab_8" onclick="goTab(8)">Risks/Alerts</td>
<td class="tab" id="tab_9" onclick="goTab(9)">Demographics</td>
<td class="tab" id="tab_10" onclick="goTab(10)">Referral</td>
<td class="tab" id="tab_11" onclick="goTab(11)">Transport</td>
</tr>
</table>

If a tab has been clicked it will show/hide a specific div ie: "divTabControl_1" is shown if tab_1 is clicked, all the rest (could be a different number of tabs & divs on each file)

the divs are coded as

<div class="categoryContent" id="divTabControl_1" style="visibility:visible;">
content here
</div>

I'm trying to loop through each to find which 'tab_'+tabID has been clicked and then using that I need to show or hide the div contents based on each..

again I have to say i cant edit the files.. Prefer to do this in a jQuery function, but just not got the understanding of jQuery yet to do this..

Any help would be great..

Thanks

Answer 1

If I understand correctly, you are trying to implement the goTab function. Am I Correct ? Is this what you are trying to achieve?

function goTab(index) {
    // Selector for the div to show (selected by id)
    visibleDivSelector = "#divTabControl_" + index;
    // Hide all divs with class "categoryContent" except the one to show
    $("div.categoryContent:not(" + visibleDivSelector + ")").hide();
    // Show selected div
    $(visibleDivSelector).show();
}

EDIT: You might also want to add some code to add/remove tab/tab_active class to you tab TDs.

Answer 2

   var previousElem = "";
   function goTab ( tabID )
   {
        if ( previousElem != "" )
        {
            $("#divTabControl_" + previousElem).css ( "visibility" , "hidden" );
        }
       $("#divTabControl_" + tabID).css ( "visibility" , "visible" );

       previousElem = tabID;
   }