Tabbed panel not showing the slider content

Question

Hi I am using a javascript to get tabs functionality for buttons. In each tab I want to show a slider for which I am showing anything slider. The issue I am facing is the slider content is not showing in the 2nd and 3rd tabs.There is no issue with tabs functionality.tabs function working fine.I can able to switch from one tab to other.Could anyone help me.

Here is the script I am using for tabs functionality

<script type="text/javascript">
    $(document).ready(function () {
            var tabContainers = $('div.spec-nav > div');
            tabContainers.hide().filter(':first').show();

            $('div.spec-nav ul li a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.spec-nav ul li a').removeClass('spec-actv');
                $(this).addClass('spec-actv');
                return false;
            }).filter(':first').click();

        });

</script> 

HTML code for tabs and slider

<div class="spec-nav">
<ul class="serv-nav">
    <li id="p1"><a href="#first" class="im1 spec-actv">Tab1</a></li>
    <li id="p2"><a href="#second" class="im2">Tab2</a></li>
    <li id="p3"><a href="#third"  class="im3">Tab3</a></li>
</ul>

<div id="first" class="anythingSlider-theme2" style="display:block;float:left;">

   <!-- AnythingSlider #1 -->
   <ul id="slider1">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #1 -->

</div><!--first-->

<div id="second" class="anythingSlider-theme3" style="display:none;float:left;">

    <ul id="slider2">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #2 -->   

</div><!--second-->

<div id="third" class="anythingSlider-theme4" style="display:none;float:left;">
    <ul id="slider3">
    <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>
            <li>                       
      <div class="google">
       <img src="images/google.png" alt="google" class="left" />
       <div class="sec left">
        <p>We understand that navigating the maze</p>
         <a href="" class="button1">START NOW</a>
       </div>
      </div><!--google-->
    </li>   
    </ul>  <!-- END AnythingSlider #3 -->
    </div><!--third-->

</div><!--spec-nav-->

Intializtion code of anthing slider

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>     
 $(document).ready(function(){
   $(function(){
   $('#slider1').anythingSlider({
            theme           : 'metallic',
            easing          : 'easeInOutBack',
            navigationFormatter : function(index, panel){
                return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
            },
            onSlideComplete : function(slider){
                // alert('Welcome to Slide #' + slider.currentPage);
            }
        });


    });
           });

Answer 1

Is there a slider in the second and third tabs?

I used your code to put together this demo and it all seems to work for me.

Also, you don't need to wrap the code in two document ready functions, just one is enough:

$(function () { // same as $(document).ready(function(){
    $('#slider1').anythingSlider({
        theme: 'metallic',
        easing: 'easeInOutBack',
        navigationFormatter: function (index, panel) {
            return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
        },
        onSlideComplete: function (slider) {
            // alert('Welcome to Slide #' + slider.currentPage);
        }
    });
});