Flexslider not working properly when initially hidden

Question

initially I have my flexslider hidden, until a user clicks on a link and then it will open up. But for some reason the slider won't work after it's displayed until I adjust the browser window, which is strange! When I don't hide the flexslider it works fine. Below is my CSS, HTML, and the jquery that I use to open and close the flex slider. Anyone familiar with flex slider and would know why this is happening? Thank you!

CSS

section#hotspots .dropdown-area {   
    width: 100%;
    float: left;
    display: none;
}

HTML

<h1>Hot Spots <span class="toggle-button"></span></h1>

<section class="dropdown-area">
    <div class="flex-container">
        <div class="flexslider" id="secondary-slider">
            <ul class="slides">
                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-1.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-2.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-3.jpg"></li>
            </ul>

            <ul class="flex-control-nav">
                <li>
                    <a href="">LOLA COFFEE</a> /
                </li>

                <li>
                    <a href="">PUBLIC MARKET CAFE</a> /
                </li>

                <li>
                    <a href="">MATT'S BIG BREAKFAST</a> /
                </li>
            </ul>
        </div><!--End Flexslider-->
    </div><!--End Flex-container-->
</section>

JS

$(window).load(function() {
$("#hotspots .toggle-button").click(function() {
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});
});

Annals

Can you also include the code you use to hide and show the flexslider? – Eddings

This this the flexslider you are using? woothemes.com/flexslider – Ritual

Answer 1

For me worked to resize the .flexslider on the click event of the accordion/collapse

$('.acordeon-trigger').click(function () {
     // here all your accordion stuff
     $('.flexslider').resize(); // this is it
});

Cage

This should be the accepted answer. Thanks odam.fm, you saved my day – Cockerham

Answer 2

I'll assume your using the latest version of flexslider, in that case you can use setup() which is more efficient. I'd also create a seperate event to run the setup() function on the first click of a .toggle-button.

Something like this:

$toggleButtons = $('#hotspots .toggle-button');

//execute once, then remove this event
$toggleButtons.on('click.flexSetup', function() { 
   $('.flexslider').data('flexslider').setup();
   //remove this click event
   $toggleButtons.off('click.flexSetup');
});

//your regular click events
$toggleButtons.on('click', function() { 
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});

Ofcourse if you want the quick and dirty solution, you could just use absolute positioning instead of hiding the flexslider.

section#hotspots .dropdown-area {  
   position: absolute; left: -10000px;
}

And just set position and left properties to default css values when you want to "show" the flexslider. (position: static & left: auto in your case)

Louvar

Answer 3

This happens because flexslider initialized on page load but with hidden content. So you need just init flexslider on toggle click:

$(window).load(function() {
  var fs_init = 0; //init var
  $("#hotspots .toggle-button").click(function () {
      $("#hotspots .dropdown-area").slideToggle("slow");
      $("#hotspots span").toggleClass("toggle-button close");
      if (fs_init == 0) {fs_init++; //to prevent other initializations
        $('.flexslider').flexslider({
            animation: "slide" //enter you params here
        });            
      }
  });
});

note: don't initialize slider twice, just from toggle event, not onLoad

Irony