Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two sets of TABS

    Hi All,

    I'm trying to include a second set of tabs in my WordPress theme to have tabs in main area and side bar but it looks like there is some kind of conflict and the current JS code works well only with one set of tabs.

    What I need to achieve:



    This is the HTML code:

    Code:
    <div class="tabprice">
    <ul class="tabnavig">
    <li><a href="#priceblock1"><span class="big">Tab 1</span></a></li>
    <li><a href="#priceblock2"><span class="big">Tab 2</span></a></li>
    </ul>
    <div id="priceblock1">
    <div class="clr"></div>
    <div class="singletab"> TAB 1 </div>
    </div>
    <div id="priceblock2">
    <div class="clr"></div>
    <div class="singletab"> TAB 2 </div>
    </div>
    </div>
    and this is the JS code:

    Code:
    /* Tab Control home main */
    
    jQuery(function($) {
    
        var tabContainers = $('div.tabcontrol > div');
    
        tabContainers.hide().filter(':first').show();
    
        $('div.tabcontrol ul.tabnavig a').click(function () {
    
            tabContainers.hide();
    
            tabContainers.filter(this.hash).fadeIn(100);
    
            $('div.tabcontrol ul.tabnavig a').removeClass('selected');
    
            $(this).addClass('selected');
    
            return false;
    
        }).filter(':first').click();
    
    });
    
    
    
    /* Tab Control sidebar */
    
    jQuery(function($) {
    
        var tabs = [];
    
        var tabContainers = [];
    
        $('ul.tabnavig a').each(function () {
    
            if (window.location.pathname.match(this.pathname)) {
    
                tabs.push(this);
    
                tabContainers.push($(this.hash).get(0));
    
            }
    
        });
    
    	
    
    	//hide all contrainers execpt for the one from the URL hash or the first container
    
    	if (window.location.hash != "" && window.location.hash.search('priceblock') >= 0){ 
    
    		$(tabContainers).hide().filter(window.location.hash).show(); 
    
    		//detecting <a> tab using its "href" which should always equal the hash
    
    		$(tabs).filter( function (index) {
    
    		    return $(this).attr('href') == window.location.hash;
    
    		}).addClass('selected'); 
    
    		$('body').scrollTop;
    
    	}
    
    	else { 
    
    		$(tabContainers).hide().filter(':first').show()
    
    		$(tabs).filter(':first').addClass('selected'); 
    
    	}
    
    	
    
        $(tabs).click(function() {
    
            // hide all tabs
    
            $(tabContainers).hide().filter(this.hash).fadeIn(500);
    
            $(tabs).removeClass('selected');
    
            $(this).addClass('selected');
    
            return false;
    
        });
    
    	$('html').scrollTop(0); //because pageloads with hashes cause page to scroll
    
    });


    Thanks a lot for any help.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    The very first line
    Code:
        var tabContainers = $('div.tabcontrol > div');
    is looking for a <div> with the class name of "tabcontrol" and then looking for the <div> inside of that.

    That is, it will find the <div>'s in red, below.
    Code:
         <div class="tabcontrol">
             <div>....</div>
             <div>....</div>
         </div>
    The "tab1 and "tab2" code you show does not follow that pattern.

    Also, you are using jQuery, not simple ordinary JavaScript, so you should be looking in the jQuery documentation and/or forum for help.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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