Title: Responsive plugin problem
Last modified: April 26, 2020

---

# Responsive plugin problem

 *  Resolved [Scott Harmala](https://wordpress.org/support/users/atkscott/)
 * (@atkscott)
 * [6 years ago](https://wordpress.org/support/topic/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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-plugin-problem%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years ago](https://wordpress.org/support/topic/responsive-plugin-problem/#post-12736690)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Unfortunately, I don’t know a solution for this with the `collapse` mode. The
   problem indeed is that the tables are initially hidden, and therefore have no
   widths that are necessary for the calculations.
    The only idea that I could suggest
   would be to delay executing this code until after all the DataTables code for
   the tables has been run and initialized. That way, the tables would only be hidden
   after their widths have been calculated.
 * Regards,
    Tobias
 *  Thread Starter [Scott Harmala](https://wordpress.org/support/users/atkscott/)
 * (@atkscott)
 * [6 years ago](https://wordpress.org/support/topic/responsive-plugin-problem/#post-12740453)
 * Hi Tobias,
 * I was afraid that would be the problem. Not sure how long of a delay I will need
   but I will experiment to see if possible. I would be worried of the different
   client side conditions that would make the delay quite variable. I wonder if 
   there’s a programmatic test that could be done to know when the table are finished
   initializing.
 * Maybe a better approach would be for me to combine all tables into one and use
   jquery to hide/show the rows I want based on a hidden “category” column for the
   drop-down selection.
 * Thanks for your help.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [6 years ago](https://wordpress.org/support/topic/responsive-plugin-problem/#post-12742315)
 * Hi,
 * it might be as easy as moving your JavaScript code below the DataTables initialization
   code, as that’s evaluated synchronously.
    TablePress uses the `wp_print_footer_scripts`
   filter hook, at priority 11, for that, see [https://github.com/TobiasBg/TablePress/blob/master/controllers/controller-frontend.php#L51](https://github.com/TobiasBg/TablePress/blob/master/controllers/controller-frontend.php#L51)
   You’d just have to use that with a higher priority value.
 * Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive plugin problem’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [6 years ago](https://wordpress.org/support/topic/responsive-plugin-problem/#post-12742315)
 * Status: resolved