Jquery Bxslider inside Accordion issues

Question

I'm having a bit of a problem with my my slider that is contained in an accordion element.

The issue is that when the accordion is closed when you load the webpage, the bxslider doesn't load until the next slide. You can see an example here www.code-25.com. When you open the "about section" you should see my issue.

If I set the 'about' section of the accordion to be open on the page load the bxslider works perfectly, see this here. www.code-25.com/#1.

I was wondering if anyone has had this issue / can help me out here? Thanks.

This is the code I'm using for my accordion:

(function($) {

var allPanels = $('.menu > .page').hide();

$('.title > h3').click(function() {
    allPanels.slideUp("1000");
    if($(this).parent().next().is(':hidden'))
    {
        $(this).parent().next().fadeIn("500");
    }
    return false;
});

and these are my current bxslider settings:

$(document).ready(function(){
$('.bxslider').bxSlider({ 
captions: true,
auto:true,  
autoStart:true,
autoControls:true,
mode:'fade',
minSlides: 1,
maxSlides: 2,
adaptiveHeight: true,
slideWidth: 700
});
});

Answer 1

var allPanels = $('.menu > .page').hide(); is setting the container that holds your bxSlider to display: none. Because of this, the image dimensions in the slider are set to width and height: 0. bxSlider is loading correctly, but it's reading the image dimensions in their hidden state, and setting the height of the slider to 0.

To get around this, you could wait until bxSlider has finished loading before you hide your accordion content:

var allPanels = $('.menu > .page');

$('.bxslider').bxSlider({ 
  captions: true,
  auto:true,  
  autoStart:true,
  autoControls:true,
  mode:'fade',
  minSlides: 1,
  maxSlides: 2,
  adaptiveHeight: true,
  slideWidth: 700,
  onSliderLoad: function() {
     allPanels.hide();
  }
});

$('.title > h3').click(function() {
  allPanels.slideUp("1000");

  if($(this).parent().next().is(':hidden')) {
    $(this).parent().next().fadeIn("500");
  }
  return false;
});