title: bxSlider within colio
body: <p>first post so hopefully i've followed protocol.</p>
  
  <p>I'm using  bxslider with colio on my site - specifically trying to add the bxSlider gallery within the hidden colio content. I saw on previous questions people having an issue initiating the gallery due to it being within a hidden div <a href="https://stackoverflow.com/questions/11071269/bxslider-within-show-hide-divs">here</a> </p>
  
  <p>I did a test with a toggled hidden div which worked fine</p>
  
  <p>But can't get it to work with colio: <a href="http://opentillate.co.uk/site_tests/colio_bxslider/" rel="nofollow noreferrer">my_colio_test</a></p>
  
  <p>Any ideas?</p>
  
  <p>So Javascript for my_colio_test:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      var mySlider;
  
      mySlider = $('.bxslider').bxSlider({
      auto: true,
      video: true,
      useCSS: false
      });
  
  
  
          // "scrollTop" plugin
          $.scrollUp();
  
  
          // "colio" plugin
          $('.portfolio .list').colio({
              id: 'my_portfolio',
              theme: 'black',
              placement: 'inside',
              hiddenItems: '.isotope-hidden',
              onContent: function(content){
                   $(".holder").show(); 
                   mySlider.reloadSlider(); 
              }
          });
  
  
  
  
          // "isotope" plugin
          var filter = '*', isotope_run = function(f) {
              var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});      
              window.setTimeout(function(){
                  list.trigger('colio','excludeHidden');
              }, 25);
          };
  
          $('.portfolio .filters a').click(function(){
              $(this).addClass('filter-active').siblings().removeClass('filter-active');
              var href = $(this).attr('href').substr(1);
              filter = href ? '.' + href : '*';
              isotope_run(filter);
              return false;
          });
  
          isotope_run(filter);            
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In the toggle test i did an initial function defining the slider so it initated:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
          var mySlider;
  
          mySlider = $('.bxslider').bxSlider({
          auto: true,
          video: true,
          useCSS: false
          });
  
  
  
        var $content = $(".content").hide();
        $(".toggle").on("click", function(e){
          $(this).toggleClass("expanded");
          $content.slideToggle();
  
          $(".holder").show();     // DIV that contain SLIDER
          mySlider.reloadSlider();   
        });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Steven wanderski - bxSlider developer about having to initialise hidden slider:</p>
  
  <blockquote>
    <p>Since the slider cannot calculate the height and width's of hidden
    elements, you need to either call .bxSlider after the elements have
    been set to display:block, or move them off screen, set them to
    display: block, initialize the slider, then hide them.</p>
  </blockquote>
  
  <p>SO I've sort of got it to work - yay.
  In the CSS the colio-content is set to display:none - so i removed it and put it in the javascript function instead.
  Only issue i have now is that i get replicated/duplicated sliders as i don't know how to target.</p>
  
  <p>Where i'm at now: <a href="http://opentillate.co.uk/site_tests/colio_bxslider/index2.html" rel="nofollow noreferrer">my_colio_test_2</a></p>