title: bxSlider within show/hide divs
body: <p>My page's content is toggled using different links, showing one <code>div</code> at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs,  <code>newboxes1</code>.</p>
  
  <p>Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example <a href="http://megalife.fr/test/test.html" rel="noreferrer">here</a>.</p>
  
  <p>Here's what my code looks like :</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;                                         
  function showonlyone(thechosenone) {
       $('.newboxes').each(function(index) {
            if ($(this).attr("id") == thechosenone) {
                 $(this).show();
            }
            else {
                 $(this).hide();
            }
       });
  }&lt;/script&gt;  
  &lt;/script&gt;
  
  
  &lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery.bxSlider.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
  
  $(function(){
    var slider = $('#slidersample').bxSlider({
      mode:'fade',
      controls: false
    });
    $('#bx-prev-sample').click(function(){
      slider.goToPreviousSlide();
      return false;
    });
      $('#hover-next-g-sample').click(function(){
      slider.goToPreviousSlide();
      return false;
    });
    $('#bx-next-sample').click(function(){
      slider.goToNextSlide();
      return false;
    });
    $('#hover-next-d-sample').click(function(){
    slider.goToNextSlide();
    return false;
    });
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;div id="left-menu"&gt;
  &lt;a id="myHeader1" href="javascript:showonlyone('newboxes1');" &gt;LINK 1&lt;/a&gt;&lt;br /&gt;
  &lt;a id="myHeader2" href="javascript:showonlyone('newboxes2');" &gt;LINK 2&lt;/a&gt;&lt;br /&gt;
  &lt;a id="myHeader3" href="javascript:showonlyone('newboxes3');" &gt;LINK 3&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="newboxes" id="newboxes1"&gt;DIV 1
  &lt;!-- SLIDER --&gt;
  &lt;div id="slider" style="margin-top: 0px; width="580 px"; height="375 px"&gt;
  &lt;div class="bx-prev"&gt;&lt;div id="bx-prev-sample"&gt;←&lt;/div&gt;&lt;/div&gt;
  &lt;div class="bx-next"&gt;&lt;div id="bx-next-sample"&gt;→&lt;/div&gt;&lt;/div&gt;
  &lt;div class= "hover-next-g"&gt;&lt;div id="hover-next-g-sample" style="height:100%; width:100%"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div class= "hover-next-d"&gt;&lt;div id="hover-next-d-sample" style="height:100%; width:100%"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px"&gt;
    &lt;li&gt;&lt;img src="images/1.jpg" width="580" height="375" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="images/2.jpg" width="580" height="375" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="images/3.jpg" width="580" height="375" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- SLIDER END--&gt;
  &lt;/div&gt;
  
   &lt;div class="newboxes" id="newboxes2"&gt;DIV 2&lt;br /&gt;&lt;/div&gt;
  
   &lt;div class="newboxes" id="newboxes3"&gt;DIV 3&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I use </p>
  
  <pre><code>.newboxes {display:none;}
  </code></pre>
  
  <p>in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see <a href="http://megalife.fr/test2/test2.html" rel="noreferrer">here</a>. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use <code>display:block</code> or <code>display:none</code> elsewhere in the code has been unsuccessful.</p>
  
  <p>Can anyone think of a way to fix this? Thank you.</p>