Flexslider does not work properly on initial hide

Question

initially my flexslider is hidden until the user clicks on the link and then opens. But for some reason, the slider will not work after it is displayed until I configure the browser window, which is strange! When I do not hide flexslider, it works fine. Below are my CSS, HTML and jquery that I use to open and close the flex slider. Anyone familiar with the flexible slider and will know why this is happening? Thanks!

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 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"); }); }); 

Answer 1

I assume you are using the latest version of flexslider, in which case you can use setup (), which is more efficient. I also create a separate event to trigger the setup () function the first time I click the .toggle button.

Something like that:

 $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"); }); 

If you need a quick and dirty solution, you can simply use absolute positioning instead of hiding flexslider.

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

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

Answer 2

This is because flexslider is initialized when the page loads, but with hidden content. So you just need to run flexslider to switch:

 $(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: do not initialize the slider twice, just from a switch event, not onLoad

Answer 3

For me it worked to resize .flexslider to accordion click event / collapse

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