ansaurus

Question

JQuery simple tab program does not show nested Div Tag

Answer 1

+1 A:

Instead of hiding all descendant <div> elements, only hide the first level, so change this:

$('#tabs div').hide();

To this:

$('#tabs > div').hide();

this fixes the issue since it's never hidden in the first place :)

The same applies here:

$('#tabs div').fadeOut('slow');
//to..
$('#tabs > div').fadeOut('slow');

Nick Craver 2010-10-02 19:12:47

Looks like OP is also affecting all descendants with the `fadeOut()` in addition to the `hide()`. ---- And then only the main tab `div` is faded back in but the children of the main tab remain invisible.

Peter Ajtai 2010-10-03 00:02:05

@Peter - good catch, updated, didn't test that far :)

Nick Craver 2010-10-03 00:04:22

Answer 2

+1 A:

You only want to hide and show the direct child of #tabs. The other divs inside Tab1 and Tab2 should remain as they are. To accomplish this, use the direct child selector ( > ).

To simply get things working change the lines that use #tabs div to #tabs > div 2 lines:

    $('#tabs > div').hide();                         // <== direct child selector
    $('#tabs > div').fadeOut('slow');                // <== direct child selector

But there are a few other improvements.

Changed $('#tabs ul li').removeClass('active'); to $('#tabs ul li.active').removeClass('active');, since it's a little more efficient to simple select the elements of interest with the active class instead of all the lis.
Include the fadeIn in the callback of the fadeOut, this'll make things appear a little smoother, since it ensures that fadeIn only begins once fadeOut ends. In fact, the whole thing looks much nicer with a .delay() tacked on.

.

$(function() {                                   // <== shorter form of doc ready
    $('#tabs > div').hide();
    $('#tabs div:first').fadeIn('slow');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
        $('#tabs ul li.active').removeClass('active');  // <== Only what you need
        $(this).parent().addClass('active');
        var selectedTab=$(this).attr('href');
        $('#tabs > div').fadeOut('slow', function() {       // <== Use a callback
            $(selectedTab).delay(500).fadeIn('slow');          // <== add a delay
        });        
        return false;
    });
});

jsFiddle example

Peter Ajtai 2010-10-02 23:45:59

Thanks so much. The code works as intended now with your solution. Nothing better than a simple fix.

RightTurnClyde 2010-10-04 17:54:29

ansaurus

tags:

views:

answers:

JQuery simple tab program does not show nested Div Tag

jsFiddle example

related questions