FlexSlider doesn't load when hidden div appears / shows

FlexSlider doesn't load when hidden div appears / shows

Hi together,

I'm working with Joomla 2.5 and am using this here:

My theme is a single-pager. If I click on a navigation item javascript simple fades out one div and fades in the other div. The problem now is that if I toggle the divs, the slider isn't enabled anymore. Only when I reload the page.

The Slider is loaded like this:

  1. <script type="text/javascript" charset="utf-8">
  2.  jQuery(window).load(function() {
  3. jQuery('.flexslider').flexslider({
  4. animation: "slide",       
  5. directionNav: false,             
  6.  controlNav:false,       
  7.  keyboardNav:false,         
  8.  direction: "horizontal",        
  9.  slideshowSpeed:3000,       
  10.  animationSpeed:600,        
  11.  randomize: false     
  12. });
  13.  });
  14. </script>

It is loaded each time below the slider div container. I already tried to remove the code from the modules and only load the slider once. It worked like before, but not if I toggled the divs.

Question: How can I "reload" the slider, when I toggle the div? I tried with .reload() the window, but then the whole fadein and out animation is worth nothing and I want to keep it!

This is how I change (outside jQuery document.ready()):

  1.     function changeSection(section) {
  2.         if(activeSection != section) {
  3.             $('#'+activeSection).fadeToggle("slow");
  4.             $('#'+section).delay(500).fadeToggle("slow");
  5.                                 
  6.             $('#menu-'+activeSection).removeClass('active');
  7.             $('#menu-'+section).addClass('active');
  8.                                 
  9.             document.title = activeSectionTitle;
  10.             history.pushState({}, '', section);
  11.             
  12.             activeSection = section;
  13.         }
  14.     }
Thanks in advance!