I am falling behind in my schedule, and several posts will only be published in the beginning of next year. However, I didn’t want to postpone this one as this is by far the number one request: how to split the tabs row, on my Easy Tabs solution.

This post explains how you can tweak the Easy Tabs v2 to achieve this. The option will be included in the next public release of the Easy Tabs Web Part.

To split the tabs row into two, follow these steps:

- include the Easy Tabs Web Part in your page. This is a Content Editor Web Part that contains a script.

- edit it, using the source editor of the CEWP.

- find this line of code:
activateTab(ActiveTab);

- replace it with:

var splitdiv = document.createElement("div");
var index = Math.floor(TabsTD.childNodes.length*0.5);
TabsTD.insertBefore(splitdiv,TabsTD.childNodes[index]);
activateTab(ActiveTab);

Basically, what we’re doing is simply add a “line break” in the middle of the tabs row (hence the 0.5 in the script).

You can of course add more than one line break, for example:

var splitdiv1 = document.createElement("div");
var index1 = Math.floor(TabsTD.childNodes.length*0.7);
TabsTD.insertBefore(splitdiv1,TabsTD.childNodes[index1]);
var splitdiv2 = document.createElement("div");
var index2 = Math.floor(TabsTD.childNodes.length*0.3);
TabsTD.insertBefore(splitdiv2,TabsTD.childNodes[index2]);
activateTab(ActiveTab);

Adjust the split values (0.3 and 0.7 in the above example) to your own needs.

Hope this helps!

Note: if you attended the Easy Tabs workshop, the split option is included in your Easy Tabs version (3.1). If you need more than two rows, here is a solution I have already posted on the Stump the Panel forum:

This is the current split function in v 3.1 (written in jQuery):

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.5-1);
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

splitindex is the index at which the row will be split. If you have 16 tabs, then:
splitindex = 7 (indexing starts at 0 in JavaScript)

You can change this calculation to include more splits, for example:

//split
if (ET001_split == "Yes") {
var splitindex = Math.floor($(ET001_TabContainer).children().length*0.3-1);
$(ET001_TabContainer).children().eq(splitindex*2).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(splitindex).after("<div style='font-size:0px;'></div>");}

Or you can force your own values:

//split
$(ET001_TabContainer).children().eq(5).after("<div style='font-size:0px;'></div>");
$(ET001_TabContainer).children().eq(11).after("<div style='font-size:0px;'></div>");

And if your users ask for too many rows…switch to a Quick Menu Web Part!