Show child divs in simple tabs

hi

i’m using ‘novice to ninja’ simple tabs. And I am a novice.

i’ve discovered that child divs of their parent ‘tab divs’ are hidden… by the following line I think

$( '#info div:not(:first)' ).hide();

so to allow me to use child divs within their parent ‘tab divs’ i have added the following code

$( '#info div div' ).show();

And I have had to add it twice.

Appears to work ok but it doesn’t seem very elegant.

Does it past muster or can it be improved?

Full code here:


// Start Simple tabs 

  $( '#info div:not(:first)' ).hide();
//add this line here to show child divs
  $( '#info div div' ).show();

  $('#info-nav li').click(function(e) {
    $('#info div').hide();
//add this line here to show child divs
  $( '#info div div' ).show();

    $('#info-nav .current').removeClass("current");
    $(this).addClass('current');
    
    var clicked = $(this).find('a:first').attr('href');
    $('#info ' + clicked).fadeIn('fast');
    e.preventDefault();
  }).eq(0).addClass('current');


Could you please post your HTML as the code you currently have seems very complicated for a simple tab switcher

Hi

Thanks for looking and taking an interest.

Pretty much straight out of Site Point Novice to Ninja Chapter 5 Eg 11.


<ul id="info-nav">
        <li><a href="#intro">Intro</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#about">About</a></li>
</ul>

<!-- start simple tabs --> 
<div id="info">
	
<div id="intro">

<div>Products text</div>

<!-- end intro-->  
</div> 

<div id="features">

<div>features text</div>

<!-- end features-->  			
</div>  		

<div id="about">

<div>about text</div>

<!-- end about-->  			
</div>

<!-- end simple tabs --> 
</div>

See how this goes for you, i have removed the redundancies which is basically teaching you the long way about doing things. If you don’t understand any of it let me know and ill break up what your having trouble with.

[CODE=JavaScript]// Hide all the tab content except the first content wrapper
// and append a class to show its active
$(‘div:notfirst)’, ‘#info’).hide();
$(‘#info div:first, #info-nav li:first’).addClass(‘current’);

// Append a click event to the parent element to show the child
// container next inline
$(‘li’, ‘#info-nav’).click(function(e) {
e.preventDefault();

var _this = this;

// Hide the currently opened tab content wrapper
$('.current', '#info').fadeOut('fast', function() {
    // Remove the "current" class from the tab link and and content
    // wrapper
    $('.current').removeClass('current');
    
    // Add the "current" class to the newly opened tab
    $('a', _this).addClass('current');
    $(_this.href).addClass('current').fadeIn('fast');
});

});




```html
&lt;ul id="info-nav"&gt;
    &lt;li&gt;&lt;a href="#intro"&gt;Intro&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- start simple tabs --&gt;
&lt;div id="info"&gt;
    &lt;div id="intro"&gt;
        &lt;p&gt;Products text&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- end intro--&gt;
    
    &lt;div id="features"&gt;
        &lt;p&gt;features text&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- end features--&gt;
    
    &lt;div id="about"&gt;
        &lt;p&gt;about text&lt;/p&gt;
    &lt;/div&gt;
    &lt;!-- end about--&gt;
&lt;/div&gt;
&lt;!-- end simple tabs --&gt;

No problem, i still find it hard to believe that’s actually part of the book as its a redundant way of teaching people jQuery when there are much easier solutions.

Hi SgtLegend

Sorry I think I found a snag in your code.

I have changed

$('div:notfirst)', '#info').hide();

to

$('div:not(:first)', '#info').hide();

I hope this is correct.

With or without this chnage it doesn’t appear to work too well. (Tabs display but content area doesn’t - initial tab highlighted but subsequent clicks aren’t)

If you have time it would be great if you could double check it.

Have a peek at the following fiddle, i found a couple of other bugs which is what i get for not testing the code first. If your confused about anything let me know.

Thanks

Yep that is working now. However, as with the orginal ninja code, if I insert a child div it does not display.

But if I add the following it does work:

//add this line here to show child divs
  $( '#info div div' ).show();

as in

$('div:not(:first)', '#info').hide();
//add this line here to show child divs
  $( '#info div div' ).show();

$('#info div:first, #info-nav li:first').addClass('current');

...........

Do you think this is a sufficiently elegant way to facilitate child div display in your code?

In my opinion no its not as its just more redundancy that you don’t need, instead its more semantic to use classes on specific elements that way you can target them directly instead of all the child elements as well. See the updated fiddle link below.

That has nailed it!

Thanks ever so much for your help :slight_smile: