SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    $( '#info div:not(:first)' ).hide();
    so to allow me to use child divs within their parent 'tab divs' i have added the following code

    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:


    Code:
    // 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');

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Could you please post your HTML as the code you currently have seems very complicated for a simple tab switcher

  3. #3
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for looking and taking an interest.

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

    HTML Code:
    <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>

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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');
    });
    });[/CODE]

    HTML Code:
    <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">
            <p>Products text</p>
        </div>
        <!-- end intro-->
        
        <div id="features">
            <p>features text</p>
        </div>
        <!-- end features-->
        
        <div id="about">
            <p>about text</p>
        </div>
        <!-- end about-->
    </div>
    <!-- end simple tabs -->

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi SgtLegend

    Sorry I think I found a snag in your code.

    I have changed
    Code:
    $('div:notfirst)', '#info').hide();
    to

    Code:
    $('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.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/TH9Qu/

  8. #8
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    Code:
    $('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?

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/TH9Qu/

  10. #10
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That has nailed it!

    Thanks ever so much for your help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •