Issue with flexslider and display: none ...flex-active-slide height is 0px

JavaScript
1

So I have a flexslidder that is hidden, and is toggle with a button.

My code looks like this:

<button onClick="flexsliderStart();" ></button>

<div class="flexsliderBanner flexslider" style="display: none;">
<div class="slides">
<li> .... </li>
<li> .... </li>
<li> .... </li>
</div>
</div>

function flexsliderStart() {
    $('.flexsliderBanner').slideToggle().flexslider();
}

And the flexslider intializes etc when it is shown, and all looks fine… untill you show the next slide. And when I inspect the element i can see that the second slide with class=“flex-active-slide” has a height of 0, when it should have the height of the content just like the first slide.

if I take away the display none and toggling and just intialize the slider without it first beeing hidden it works fine, all <li class=“flex-active-slide”> … </li> has the contents height.

Anyone have any ideas why this problem occurs when the slider first is hidden?