Custom Tabs Within Tabs

Question

I have a tabs module within (eventually) another tabs module: right now I have the separate just for testing. Everything works find except the first instance of adding class active to the first element of each ui > li > a.

The html is as follows:

{{!-- Outer Tabs --}}

    
        
            
                
                    
                        Warranty Requests
                    
                
                
                    Low Maintenance
                
                
                    Low Maintenance
                
            
        
        
            
                
                    1
                
            
            
                
                    2
                
            
            
                
                    3
                
            
        

    



{{!-- End Outer Tabs --}}


    {{!-- Start Tabs --}}
    
        {{!-- Start Tab Nav --}}
        
             HVAC Systems
                 
                
            
            
                 Plumbing Systems
                 
                

            
            
                 Electrical Systems
                 
                

            
            
                 General Home
                 
                

            
            
                 Future Video Sets

                 
                
            
        
        {{!-- End Tab Nav --}}
        {{!-- Start Tab Content --}}
        
            
                
                    
                    
                    

                
            
            
                2Some content
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus sed mollitia enim omnis nam
                    velit, harum distinctio ab, ipsam obcaecati ad numquam eius totam rerum consequuntur maiores
                    dicta similique? Vero!
                
            
            
                3Some content
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere explicabo nulla impedit nostrum
                    nisi! Fugit porro minus, ex id quod tempore culpa necessitatibus! In perspiciatis consequuntur
                    blanditiis atque. Ipsam, error?
                
            
            
                4Some content
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla minus eos eligendi, eveniet
                    officia voluptatibus corporis excepturi tempore voluptatum? Doloribus obcaecati adipisci harum
                    quam autem quaerat necessitatibus laboriosam reiciendis veniam.
                
            
            
                5Some content
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam quos, aspernatur delectus
                    facilis animi labore minima sequi quo dolores at nostrum unde velit sapiente incidunt nesciunt
                    in explicabo enim? Dolor?
                
            
        
        {{!-- End Tab Content --}}
    
    {{!-- End Tabs --}}

And here is the js

$('.video-tabs').each(function () {
    var $this = $(this);
    var $containers = $this.find('.tab-content-wrapper .container');
    $(".tabs li a").first().addClass('active');
    $(".tabs .arrow").hide();
    $(".tabs .arrow").first().show();

    $this.find(".tabs li a").click(function (e) {
    e.preventDefault();
    $this.find('.active').removeClass('active');
    $this.find('.arrow').hide();
    $(this).next(".arrow").show();
    $(this).addClass('active');
    var t = $(this).attr("id");
    var index = $(this).closest('li').index();
    //this is the start of our condition
    $containers.hide();
    $containers.eq(index).fadeIn("slow");
    });
});

It all works fine (adding/removing "active" class) once you start clicking around, however in the first load, it's only adding the active class to the first tab set and not the second. Any tips are appreciated

Phong Nguyễn · Accepted Answer

If I know your mind, your issue is Content Tab in each tab show at the same time, and you want show First Content Tab at First Load. If it's right, just add:

$containers.hide();
$containers.first().show();

At that time, your code look like:

$('.video-tabs').each(function () {
    var $this = $(this);
    var $containers = $this.find('.tab-content-wrapper .container');
    $this.find(".tabs li a").first().addClass('active');//Change here
    
    $(".tabs .arrow").hide();
    $(".tabs .arrow").first().show();

    //Add here
    $containers.hide();
    $containers.first().show();
    $this.find(".tabs li a").click(function (e) {
      e.preventDefault();
      $this.find('.active').removeClass('active');
      $this.find('.arrow').hide();
      $(this).next(".arrow").show();
      $(this).addClass('active');
      var t = $(this).attr("id");
      var index = $(this).closest('li').index();
      //this is the start of our condition
      $containers.hide();
      $containers.eq(index).fadeIn("slow");
    });
});

Custom Tabs Within Tabs

Answers (1)

Related Questions