Multiple FlexSliders inside a jquery hide/show content switcher.

Question

I have a jquery content switcher that shows/hides divs when the appropriate link is clicked. Inside each of those Divs is a FlexSlider. The first flex slider works just fine, but when you click the link to display a different Div, the flex slider is messed up, it shows all 3 slides at once. If you defocus and refocus the browser window (click on the desktop to defocus the window and then click back in the window to refocus) the flex slider then works fine. It's a though problem to explain, best to see it in action. The site is: http://www.benhenschel.com

"Web" is the first Slider which works fine, but if you click on "Mobile" the second Flex Slider Appears and you can see that it show all 3 slides at once. If you defocus and refocus the browser window, the flex slider will display correctly.

Here is the code for the content switcher and the Flex Slider

<!--Hide/Show-->
    <script type="text/javascript" charset="utf-8">
        $(function(){

function contentSwitcher(settings){
    var settings = {
       contentClass : '.workContent',
       navigationId : '#navigation'
    };

    //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);

        //dissable normal link behaviour
        e.preventDefault();

        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');

        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show();

    });
}
contentSwitcher();
});

    </script>

    <!--Flex Slider-->
    <script type="text/javascript" charset="utf-8">
    $(window).load(function() {
    $('.flexslider').flexslider();
    });
    </script>

Here is the HTML

                <!-- Web -->
                <div id="webContainer" class="workContent flexslider">
                    <h3>Web</h3>
                    <ul class="slides">
                        <!-- Slide 1 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivorWeb.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor</h4>
                                <p>
                                    The goal of this project, was to create a teaser page for a iPhone app called Urban Survivor. This simple one page site was designed to introduce the app, and generate interest. By providing a email sign up that interest can be measured.
                                    <br /><br />
                                    <a href="http://www.urbansurvivorapp.com">Visit Site</a> 
                                </p>
                            </div>
                        </li>

                        <!-- Slide 2 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/taykey.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Taykey</h4>
                                <p>
                                    I was tasked with redesigning Taykey's website, the goal was to better communicate what Taykey had to offer, and how Taykey works. Additionally, provide general information about the company, jobs available as well as contact information for the various offices. The redesign also aimed at brining a more concise visual brand across other Taykey marketing material.                               
                                    <br /><br />
                                    <a href="http://www.taykey.com">Visit Site</a> 
                                </p>
                            </div>
                        </li>

                        <!-- Slide 3 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/ireland.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>I'm Off To Ireland</h4>
                                <p>
                                    This was a personal website I created so I could share my experiences while studying abroad in Waterford, Ireland.                              
                                    <br /><br />
                                    <a href="http://www.imofftoireland.com">Visit Site</a> 
                                </p>
                            </div>

                        </li>

                    </ul>
                </div>
                <!-- END Web -->

                <!-- Mobile -->
                <div id="mobileContainer" class="workContent flexslider">

                    <h3>Mobile</h3>
                    <ul class="slides">

                        <!-- Slide 1 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/app.png" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor iPhone App</h4>
                                <p>
                                    Urban Survivor alerts the user when they have physically entered an area with a high crime rating. Additionally, the user will be able to check the threat level of their current physical location and see a broader view of their surroundings through the use of a heat map. Both the threat meter and the heat map use a simple, color-coded visual cue (green = low, yellow = neutral, red = high). Finally, there is a panic button dials 911 when pressed.                                
                                </p>
                            </div>
                        </li>

                        <!-- Slide 2 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/wireframe.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor App: Wireframe</h4>
                                <p>
                                    A major requirement for this app was a super simple navigation. After several iterations we landed on having two buttons in the top left and right hand corner of the screen that, when taped, would swipe left/right reveling the content of the new screen. As an alternate to this navigation, the user would swipe left or right with their fingers to also revel the content.                                   
                                </p>
                            </div>
                        </li>

                        <!-- Slide 3 -->
                        <li>
                            <div class="workImage">
                                <img src="/images/work/urbanSurvivor/workflow.jpg" alt="" />
                            </div>

                            <div class="workDescription">
                                <h4>Urban Survivor App: User Workflow</h4>
                                <p>
                                    This flowchart shows the entire user workflow, and how the user could interact with the app.                                 
                                </p>
                            </div>
                        </li>
                    </ul>

                </div>
                <!-- END Mobile -->

I really don't know much about jQuery, so any help would be greatly appreciated.

Answer 1

Well, after trying different tabs sistems and self made jquery solutions, I solved the same problem in a different and extremely simple way!

You just need to create a first slideshow, with 5 slides, and in each slide put another flexslider. Set controlNav to true and set up manualControls with your navigation html structure.

Here is my setup:

//first slideshow
  $('.flexslider_cont').flexslider({
    animation: "slide",
    slideshow: 0,
    useCSS: true,
    controlNav: true,
    selector: ".slides_l1 > .slide_l1",
    manualControls: "#navorizzontale li", //navigation structure
    directionNav: false,

  });     

        $('.flexslider2a').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true,
        });

        $('.flexslider2b').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });

      $('.flexslider2c').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });

        $('.flexslider2d').flexslider({
          animation: "slide",
          slideshow: 0,
          useCSS: true,
          controlNav: false,
          directionNav: true
        });