Responsive plugin problem

Hi Tobias,
I have a page with 9 tables on it. I only want to show one at a time. I have created jscript to achieve this with a drop down table selector. Everything seems to work except for the responsive extension. Only the first table collapses correctly. Inspecting the page show me that the other tables have element.stlye 0px width. I’m guess that this is the problem in that the DataTables jscript library won’t do anything with a 0px width table.

Is there a better way for me to achieve this goal of showing only one table at a time with a user select drop down list?

Here’s my jscript:
<script type = “text/javascript” > // <![CDATA[
jQuery(document).ready(function() {
jQuery(“select#options”).change(function() {
var shtcode_selected = ”;
jQuery(“select#options option:selected”).each(function() {
shtcode_selected += jQuery(this).val();
});
shtcode_selected = “shtcode” + shtcode_selected;
shtcodeid = document.getElementById(shtcode_selected);
var i = 1;
var shtcodestep = “shtcode” + i;
while (i < 10) {
shtcodestepid = document.getElementById(shtcodestep);
jQuery(shtcodestepid).hide();
i++;
shtcodestep = “shtcode” + i;
}
jQuery(shtcodeid).show();
jQuery(“#hidden-onpage-load”).show();
}).trigger(“change”);
});
// ]]></script>

Here’s the HTML:

<select id=”options” name=”options”>
<option value=”1″>Matrix</option>
<option value=”2″>Distribution & Power Supplies</option>
<option value=”3″>Master User Stations</option>
<option value=”4″>Wireless</option>
<option value=”5″>Cabling</option>
<option value=”6″>Headsets and Earpieces</option>
<option value=”7″>Telephone</option>
<option value=”8″>Interfaces</option>
<option value=”9″>Audio Accessories</option>
</select>

<div id=”hidden-onpage-load” hide>
<div id=”shtcode1″>[table id=1 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode2″>[table id=2 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode3″>[table id=3 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode4″>[table id=4 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode5″>[table id=5 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode6″>[table id=6 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode7″>[table id=7 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode8″>[table id=8 responsive=collapse datatables_rowgrouping=true /]</div>
<div id=”shtcode9″>[table id=9 responsive=collapse datatables_rowgrouping=true /]</div>
</div>

Thanks,

The page I need help with: [log in to see the link]