Can't Hide a Div on (document).ready

Can't Hide a Div on (document).ready

Hello, I'm using the Tableau JavaScript API to toggle between two dashboards. The two buttons on the page I have work fine to do this, as they are just showing and hiding some divs that the dashboards are in. The problem I'm having is hiding one of the dashboards when the page loads. I have a feeling its a timing issue, but not sure what the problem is, Help appreciated!

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  7. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  8. <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  10. <style>
  11. .btn {
  12.   border: 2px solid black;
  13.   background-color: #336699;
  14.   color: black;
  15.   padding: 10px 16px;
  16.   font-size: 15px;
  17.   cursor: pointer;
  18.   font-family: Arial, Helvetica, sans-serif;
  19. text-decoration: none;
  20. }

  22. /* Blue */
  23. .launch {
  24.   border-color: #2196F3;
  25.   color: #ecf2f9;
  26. }

  28. .launch:hover {
  29.   background: #2196F3;
  30.   color: white;
  31. }

  33. .launch:focus {
  34.   background: #2196F3;
  35.   color: white;
  36. }

  38. .default:hover {
  39.   background: #e7e7e7;
  40. }
  41. </style>

  43. <script>
  44. $(document).ready(function() {
  45.     $("#viz1558393573094").hide();
  46. });
  47. </script>

  49. </head>

  51. <body>


  54. <div style="overflow:auto" id='buttons'>
  55. <button id="btn1" class="btn launch">Red/Green</button>
  56. <button id="btn2" class="btn launch">Blue/Gold</button>
  57. </div>

  59. <div class='tableauPlaceholder' id='viz1558393573094' style='position: relative'>
  60.   <noscript><a href='#'><img alt=' '    

  62. src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Su&#47;SuperStoreProfit_15582820781270&#47;Profit&#47;1_rss.png' style='border:         

  64. none' /></a>
  65.   </noscript>

  67.   <object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version'    

  69.   value='3' /> <param name='site_root' value='' /><param name='name' value='SuperStoreProfit_15582820781270&#47;Profit' /><param name='tabs' value='no'      

  71. /><param name='toolbar' value='no' /><param name='static_image'      

  73. value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Su&#47;SuperStoreProfit_15582820781270&#47;Profit&#47;1.png' /> <param      

  75. name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param      

  77. name='display_overlay' value='yes' /><param name='display_count' value='yes' />
  78.   </object>
  79. </div> 

  81. <div class='tableauPlaceholder' id='viz1558381354848' style='position: relative'>
  82. <noscript><a href='#'><img alt=' ' 

  84. src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Su&#47;SuperStoreProfit_15582820781270&#47;Profit2&#47;1_rss.png' style='border: none' 

  86. /></a></noscript>
  87. <object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' 

  89. value='3' /> <param name='site_root' value='' /><param name='name' value='SuperStoreProfit_15582820781270&#47;Profit2' /><param name='tabs' value='no' 

  91. /><param name='toolbar' value='no' /><param name='static_image' 

  93. value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Su&#47;SuperStoreProfit_15582820781270&#47;Profit2&#47;1.png' /> <param 

  95. name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param 

  97. name='display_overlay' value='yes' /><param name='display_count' value='yes' />
  98. </object>
  99. </div>  
  100.        
  101. <script type='text/javascript'>
  102.      var divElement = document.getElementById('viz1558381354848');
  103.      var vizElement = divElement.getElementsByTagName('object')[0];                    if ( divElement.offsetWidth > 800 ) { 

  105. vizElement.style.width='1000px';vizElement.style.height='800px';} else if ( divElement.offsetWidth > 500 ) { 

  107. vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';} else { 

  109. vizElement.style.width='100%';vizElement.style.height='1500px';}                     var scriptElement = document.createElement('script');                    

  111. scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);
  112.           
  113. </script>

  115. <script type='text/javascript'> 
  116.         var divElement2 = document.getElementById('viz1558393573094');
  117.         var vizElement2 = divElement2.getElementsByTagName('object')[0];
  118.                     if ( divElement2.offsetWidth > 800 ) { vizElement2.style.width='1000px';vizElement2.style.height='800px';} 
  119.                     else if ( divElement2.offsetWidth > 500 ) { vizElement2.style.width='100%';vizElement2.style.height=(divElement2.offsetWidth*0.75)+'px';} 
  120.                     else { vizElement2.style.width='100%';vizElement2.style.height='1500px';} 
  121.                     var scriptElement2 = document.createElement('script');
  122.                     scriptElement2.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
  123.                     vizElement2.parentNode.insertBefore(scriptElement2, vizElement2); 
  124.  </script>


  127. <script type="text/javascript">
  128.         document.getElementById("btn1").addEventListener("click", function(){
  129.     //alert("oh snap, i was clicked...");

  131.   $('#viz1558381354848').hide(); 
  132.   $('#viz1558393573094').show();  

  134.   });
  135.     </script>

  137. <script type="text/javascript">
  138.         document.getElementById("btn2").addEventListener("click", function(){
  139.     //alert("oh snap, i was clicked...");
  140.   
  141.         $('#viz1558393573094').hide();
  142.         $('#viz1558381354848').show();
  143.        
  144.   });
  145.  </script>

  147. </body>

  149. <html>