How to make a tab control multiple divs? Created Jul 31, 2009

I'd like to know this also. I searched the forum, RTFM and searched google but I cannot find the answer. I'm fairly sure it can be done either through a modified function call or through the api, but I'm not cleaver enough to figure it out. Has anyone else achieved this?

You want to configure a callback function for the tab in question. Tweaking the documented example, try the following:

$("#example").tabs(".panes > div", {
  onClick: function (tabIndex) {
    // leave out the if-condition in case you want this to happen for all tabs
    // this assumes you want the image shown when the 3rd tab is clicked
    if (tabIndex === 2) {
      // let's say the image is contained in a div class="tabimage"
      $("div.tabimage").show();
    }
  }
});

Again as documented, there's more than one way to do it. Depending on what you want to do or your coding style, you can take advantage of the fact that an API is provided. This achieves the same as the example above:

// make the API accessable
var mytabs = $("#example").tabs(".panes > div", {api: true});

mytabs.onClick(function (tabIndex) {
  if (tabIndex === 2) {
    $("div.tabimage").show();
  }
});

Hi Blacktrash!

Thank you very much for taking the time to help me. I really appreciate it. For posterity, here is the code snippet I ended up with to get things working.

For my setup I have a menu bar that is divided into 3 sections (could be more or less if needed). I have areas both above and below the menu bar that I wanted to change when a tab (or menu area) was clicked. Here is the code I ended up with. I'm sure there is more graceful way to achieve this, but It works GREAT!

Thanks again, Blacktrash.

<!-- Top panes -->
<div class="css-panes-top">
	<div style="display:block">Top Pane 0</div>
	<div>Top Pane 1</div>
	<div>Top Pane 2</div>
</div>

<!-- Tabs -->
<div class="css-tabs">
	<div><a href="#">Tab 0</a></div>
	<div><a href="#">Tab 1</a></div>
	<div><a href="#">Tab 2</a></div>
</div>

<!-- Bottom panes -->
<div class="css-panes-bottom">
	<div class="bp0" style="display:block"><p>Bottom Pane 0</p></div>
	<div class="bp1"><p>Bottom Pane 1</p></div>
	<div class="bp2"><p>Bottom Pane 2</p></div>
</div>

$(function() {
	$("div.css-tabs").tabs("div.css-panes-top > div", {
		effect: 'fade',
		onClick: function (tabIndex) {
			$("div.css-panes-bottom > div").hide();
			if (tabIndex === 0) { 
				$("div.css-panes-bottom > div.bp0").show(); 
			}
			if (tabIndex === 1) { 
				$("div.css-panes-bottom > div.bp1").show(); 
			}
			if (tabIndex === 2) { 
				$("div.css-panes-bottom > div.bp2").show(); 
			}
		}
	});
});

I think you can make that shorter ;-)

$(function() { 
    $("div.css-tabs").tabs("div.css-panes-top > div", { 
        effect: 'fade', 
        onClick: function (tabIndex) { 
            $("div.css-panes-bottom > div").hide();
            if (tabIndex < 3) {
               $("div.css-panes-bottom > div.bp" + tabIndex).show();  
            } 
        } 
    }); 
}); 

Depending on your setup you can even leave out the conditional.

Thanks a lot blacktrash.

IS there any way to make the second "top" div fade in like the original tabbed pane? Now it simply appears, kind of looks out of place when using the fade in effect for the main tabbed pane.

Also, would there be any way to link to the panes from outside the tabs? For instance, from an accordion that has links inside it's panes.

Here is what I'm using. Slightly modified from the code above, works great.

$(function() {
	$("ul.css-tabs").tabs("div.css-panes-top > div", {
		effect: 'fade',
		initialIndex: 0,
		onClick: function (tabIndex) {
			$("ul.css-tabs").tabs("div.css-panes-bottom > div", {
				effect: 'fade',
				initialIndex: 0
			});
		}
	});
});

thanks Marty, that worked like a charm.

No matter what i try here. The second panes never show up. I am missing something?

Without seeing your code my guess is that the css selectors on your bottom pane are not correct. Double check the selectors on the second pane and make sure they match up with the js code.

I took it as it is. No styling yet.

<!-- Top panes --> 
<div class="css-panes-top"> 
    <div style="display:block">Top Pane 0</div> 
    <div>Top Pane 1</div> 
    <div>Top Pane 2</div> 
</div> 
 
<!-- Tabs --> 
<div class="css-tabs"> 
    <div><a href="#">Tab 0</a></div> 
    <div><a href="#">Tab 1</a></div> 
    <div><a href="#">Tab 2</a></div> 
</div> 
 
<!-- Bottom panes --> 
<div class="css-panes-bottom"> 
    <div class="bp0" style="display:block"><p>Bottom Pane 0</p></div> 
    <div class="bp1"><p>Bottom Pane 1</p></div> 
    <div class="bp2"><p>Bottom Pane 2</p></div> 
</div>

bp0, bp1 and bp2 have all display:none after page loading. Also the display:block pane bp0

Please somebody give me a working examble. I don't get it working. Tried again for 2 hours :-(

i agree i need one as well , cant seem to figure it out

all i want is to display 2 div tag in one tab ,
say one floating left the other floating right

I haven't seen all your code but the main thing I noticed from this snippet above is this: each tab section needs both a tabs & panes..you simply hide the tab section you don't want to use and ten adjust css appropriately for display purposes. Important - both tab section have to be IDENTICAL, meaning the href are the same.

Example : #first, #second, #third etc...

Then the 2nd tabs have to be the same as above.

for The rest, just follow the examples above, that's how I got the fade to work on the 2nd panes section which I have since did away with anyway after all that.

If you still hav a problem msg or email me your code and I'll compare??

d.simoneau@me.com

il post the code , if you can show me where to make the changes , im just gona try it out se if it will fit into my main page

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
$(function() { 
    $("ul.css-tabs").tabs("div.css-panes-top > div", { 
        effect: 'fade', 
        initialIndex: 0, 
        onClick: function (tabIndex) { 
            $("ul.css-tabs").tabs("div.css-panes-bottom > div", { 
                effect: 'fade', 
                initialIndex: 0 
            }); 
        } 
    }); 
}); 
</script>

<body>
<!-- Top panes --> 
<div class="css-panes-top"> 
    <div style="display:block">Top Pane 0</div> 
    <div>Top Pane 1</div> 
    <div>Top Pane 2</div> 
</div> 
 
<!-- Tabs --> 
<div class="css-tabs"> 
    <div><a href="#">Tab 0</a></div> 
    <div><a href="#">Tab 1</a></div> 
    <div><a href="#">Tab 2</a></div> 
</div> 
 
<!-- Bottom panes --> 
<div class="css-panes-bottom"> 
    <div class="bp0" style="display:block"><p>Bottom Pane 0</p></div> 
    <div class="bp1"><p>Bottom Pane 1</p></div> 
    <div class="bp2"><p>Bottom Pane 2</p></div> 
</div> 
</body>
</html>

My site is up @http://www.Demiseonline.com

Has anyone revisited this issue? I simply cannot get the second div's to show up. Marty's final code seems the simplest, yet my the css on my second div's do not get switched to "display:block" no matter what I try.

I'm also not entirely sure what gsxawd99 meant in his response? You need a separate set of tabs for each set of div's? Marty's code says otherwise, with the onClick referencing the same tabs...

Any help, or perhaps a completed page I could dissect...thanks!

Email me your code, when I get home I'll look for the example code I set him with it working and send it back to you.

d.simoneau@me.com

i think i still have the example around here somewhere

<html xmlns=http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

<style>

.css-panes-top {padding-bottom:50px;}
.css-tabs {padding-bottom:50px;}

</style>

</head>

<body>

<!-- Top Tabs --> 
<ul class="css-tabsT" style="visibility:hidden;"> 
    <li><a id="t1a" href="#first">Tab 1</a></li> 
    <li><a id="t2a" href="#second">Tab 2</a></li> 
    <li><a id="t3a" href="#third">Tab 3</a></li 
></ul> 

<!-- Top panes --> 
<div class="css-panes-top"> 
    <div style="display:block"><p>Top Pane 1</p></div> 
    <div><p>Top Pane 2</p></div> 
    <div><p>Top Pane 3</p></div> 
</div> 

 
<!-- Bottom Tabs --> 
<ul class="css-tabs"> 
    <li><a id="t1a" href="#first">Tab 1</a></li> 
    <li><a id="t2a" href="#second">Tab 2</a></li> 
    <li><a id="t3a" href="#third">Tab 3</a></li 
></ul> 
 
<!-- Bottom panes --> 
<div class="css-panes-bottom"> 
    <div  style="display:block"><p>Bottom Pane 1</p></div> 
    <div><p>Bottom Pane 2</p></div> 
    <div><p>Bottom Pane 3</p></div> 
</div> 

<br>

<p>This is a test link from outside the tabs, you can now link to the tabs from anywhere in this page and from other pages and it has history support too.</p>

<a href="#second">Link to Tabs 2</a>

<script>
$(function() { 
    $("ul.css-tabsT").tabs("div.css-panes-top > div", { effect: 'fade'}).history(); 
       
    $("ul.css-tabs").tabs("div.css-panes-bottom > div", { effect: 'fade' }).history(); 
    
	
   
}); 
</script>

</body>
</html>

Hi!

I'm having the same issue... tried about everything, changed things, .. but I can't make this working.
My test code is:

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery.tools.min.js"></script>

</head>
<script>

$(function() { 
    $("ul.css-tabs").tabs("div.css-panes-top > div", { 
        effect: 'fade', 
        initialIndex: 0, 
        onClick: function (tabIndex) { 
            $("ul.css-tabs").tabs("div.css-panes-bottom > div", { 
                effect: 'fade', 
                initialIndex: 0 
            }); 
        } 
    }); 
}); 
</script>

<body>
<!-- Top panes -->
<div class="css-panes-top">
	<div style="display:block">Top Pane 0</div>
	<div>Top Pane 1</div>
	<div>Top Pane 2</div>
</div>

<ul class="css-tabs" > 
    <li><a id="t1a" href="#first">Tab 1</a></li> 
    <li><a id="t2a" href="#second">Tab 2</a></li> 
    <li><a id="t3a" href="#third">Tab 3</a></li 
></ul> 

<!-- Bottom panes -->
<div class="css-panes-bottom">
	<div class="bp0" style="display:block"><p>Bottom Pane 0</p></div>
	<div class="bp1"><p>Bottom Pane 1</p></div>
	<div class="bp2"><p>Bottom Pane 2</p></div>
</div>
</body>
</html>

It only changes the bottom pane... ow can I make both divs to change?

FYI: I'm using jquery tools 1.2.3

Thanks a lot!

when using version 1.2.3 the bottom pane works (top pane does nothing)

when using version 1.2.2 the top pane works, but now the bottom pane just shows the 3 divs, one below another.

This is driving me crazy... any help please?

Modify your code like the example posted by illusive817 above, that's the sample I did for him. I tried and failed miserably to get it working using the onbeforeclick method. It might not be the best or prettiest work around but it works. Create 2 separate tab/pane sections, hide one of the tabs and then adjust spacing with CSS. Use the same naming for both pane sections and then declare both tab/pane section separately. The example above is still working fine for me with browser back support also.

but it messed up jcarousel plugin...

I am by means an expert at all but send me your code or direct me to a test page so I can view what's going on and maybe I can figure it out.