Load FlexSlider when hidden DIV is show()n

JavaScript
1

Hello together,

I’m currently 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:

	<script type="text/javascript" charset="utf-8">
	  jQuery(window).load(function() {
		jQuery('.flexslider').flexslider({
			animation: "slide",     	
			directionNav: false,
			  controlNav:false,     	
			  keyboardNav:false,
			  direction: "horizontal",
			  slideshowSpeed:3000,
			  animationSpeed:600,
			  randomize: false
			});
	  });
	</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, 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 (without jQuery.document.ready()):

    function changeSection(section) {
        if(activeSection != section) {
            $('#'+activeSection).fadeToggle("slow");
            $('#'+section).delay(500).fadeToggle("slow");

            $('#menu-'+activeSection).removeClass('active');
            $('#menu-'+section).addClass('active');

            document.title = activeSectionTitle;
            history.pushState({}, '', section);

            activeSection = section;
        }
    }

Already thank you and have a nice weekend!

2

Hi,

Can you provide a link to a page where we can see this happening?