Easy Tabs: version 5 is out!

Posted on by

Version 5.0 (beta) of the Easy Tabs is now available in the SharePoint User’s Toolkit:
http://sp2010.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Easy-Tabs-v5.aspx
[09/14/2010: link updated to the new Toolkit location]

The main improvements:
– The Easy Tabs now work in both SP 2007 and SP 2010.
– Stylesheets are directly included in the code; for SP 2010, the colors can be modified in the Easy Tabs builder (see above screenshot).
– New “Print preview” option to display the Web Part zone in full screen.
– Better compatibility with third party Web Parts.

Like its previous versions, the new Easy Tabs script doesn’t have any external dependency (no jQuery or other external library; tabs rendered using the default SharePoint images).

There is still room for improvement, and as usual I hope to read your feedback in the comments section. The main issue with the current version is that it doesn’t work for SP 2010 calendar views (I might be wrong, but I blame Microsoft for that). Also, I keep in mind the comments made last month by Matt Bramer and Mark Miller, but I haven’t yet figured out how to implement this in a user friendly way.

Special thanks to Sean Wallbridge, MVP, for his active support; Christina Wheeler and Kerri Abraham for their feedback on usability; and Jimm Johnson for his thorough tests on third party Web Parts.

270 thoughts on “Easy Tabs: version 5 is out!”

  1. Pingback: Tweets that mention Easy Tabs: version 5 is out! « Path to SharePoint -- Topsy.com

  2. I really like these tabs but the only thing that I would like to be done is have it work the list views. If I add the easy tabs on the list itself it just doesn’t work. If I am doing something wrong or anything please tell me.

    Thanks

    • Julien, I am not sure why you would need the tabs on the list view itself.
      You’re correct, it won’t work, because on the list view no header is displayed. See the Easy Tabs page for more details on how they work.

  3. You rock – Great job and thanks for keeping this awesome script updated with new features!

  6. Brilliant as usual and I like that you’ve added the CSS into the code.

    Just a couple of questions. Is it possible to get rid of the seperator completly as the tabs sit one or two pixels higher that I need for certain webparts.

    Also for some webparts I have need of the seperator. On the formatting for .et-separator is it possible to add a border as I’m having no luck in applying one.

    Oh and having to put easytabs below your webparts to tab was a new one! Also I notice there is no preview of the tabs anymore when you are editing the page.

    I really hope MS take note of this feature as it’s invaluable and offer you loads of cash to make it a standard feature!

    • Thanks for the feedback Tony. But tell me… how much time did you spend with my Easy Tabs in the past 48 hours?
      Sure, you can remove the separator – it is called sep in the code – or simply set its style to display:none in the css.
      The border should work, feel free to send me your code and I’ll take a look (let me know if you are on a standard or wiki page, and the version of SharePoint you’re using).
      In the initial versions, the Easy Tabs script waited for the page to load. This sometimes created a flickering effect. The last versions run in the flow of the page, but for this to work the Web Parts must be already in the page.

  7. The past 48hours? A couple of hours.

    Here’s my code…

    .et-tab{padding:5px 10px 5px 10px;display:inline-block;cursor:pointer;font-family:Arial;font-size:10pt;margin-right:5px;margin-bottom:-1px}
    .et-activetab{background-color:#e8e8e8;border:solid 1px #DDDDDD;color:#194c80;font-weight:bold}
    .et-inactivetab{background-color:#f2f2f2;border:solid 1px #DDDDDD;color:#194c80}
    .et-tabrow{white-space:nowrap}
    .et-offscreen{position:absolute;max-height:0px;max-width:1px;top:-9999px;}
    .et-separator{height:15px;background-color:#f2f2f2;border:solid 1px #DDDDDD}

    It works fine in Firefox but of course in IE8 it behaves differently.

    No preview because of 2010! I don’t have 2010 yet 😉 Actually I found a very nice down download for firefox that lets you play with css on the fly and show live changes as you type.

    http://chrispederick.com/work/web-developer/

  8. Thank you for this functionality! Wow, this has made many things possible. I am having trouble with it recognizing Report Viewer web parts, it seems to completely ignore them. Any idea why?

    (using Easy Tabs 5 on SPS 2010)

  9. I have about 7 web parts to show as tabs. When I add Easy Tabs at the borrom of the web part zone, all webparts are shown as tabs. If I move the easy Tabs web part 2 places up, the bottom two web parts are shown at the bottom of the web part zone, no matter what tab is active.

    Would it be possible to invert this logic, so that all web part above the Easy Tabs web part are locked onto the page and all web parts below are shown as tabs?

    • Rob, setting different rules, like the one you suggest, is possible. But it’s more than just switching a parameter, it would require to modify some of the logic in the script.

      • Thank you for the quick response!
        I was afraid you were going to say that 🙂 Especially since you changed the script to be executed ‘in the flow of the page’ (since v4), which is a great improvement by the way. I guess those to options contradict.

        • Right. You would place the script at the bottom of the zone anyway, then you would have to restrict the tab building process to exclude the first n Web Parts.
          What people usually do is use two different Web Part zones, one that hosts the “locked” Web Parts and the other one for the tabs (example coming soon).

  10. Christophe, it goes without saying that I’m a fan of Easy Tabs. In fact, once you use them, I can’t imagine having to go without, Thank goodness these update to 2010, my site layouts would be a disaster without them. I agree with Tony Parker, these should be a standard feature! (Microsoft – are you listening?!)

    To any reader that hasn’t tried Easy Tabs yet, jump in, test it out. It couldn’t be easier, and the results are remarkable!

  11. I need to show two related list in two tabs in the list dispform.aspx. easy tabs throws a javascript error says, id is null or not an object( in activate tab function). please help.

  12. Christophe, like everyone else I think this is awesome! I have a question which I think may be related to what Rob asked. When I use the tab code, and change the “Chrome Type” on a web part to “none” to hide the title for the web part I do not want tabbed, the tab code ignores it and does not make it a tab, but the tabs for the rest of the web parts show on the page above that web part. Is there any way to get the tabs to go underneath the web part that is not tabbed?

  13. Dear Christophe,

    Thank you for the Easy Tabs! I used your 2.0 version and loved it but I just noticed 5.0 is out. I tried it and love the improved look, customization, make it your on feature etc. The only problem I’m having is that when I do it it also shows hidden web parts (including the Content Editor Web Part used to implement Easy Tabs). I used the code exactly as it was generated on your site (without any modifications, just copy/paste) so I’m not sure what could be that I’m doing wrong.

    • First, subscribe to my RSS feed! You’ll be informed everytime I publish a new script!
      Did you double check that the “hidden” option is selected in the CEWP? If so, the Web Part title should start with (Hidden).

  15. Well I figured out how to position the tabs.. adding ;position:relative;top:2px to et-tab gave me the control i needed.

    .et-tab{padding:5px 10px 5px 10px;display:inline-block;cursor:pointer;font-family:Arial;font-size:10pt;margin-right:5px;position:relative;top:2px}
    .et-activetab{background-color:#6A767E;border:solid 1px #DDDDDD;color:#fff;font-weight:bold}
    .et-inactivetab{background-color:#889BA7;border:solid 1px #DDDDDD;color:#fff}
    .et-tabrow{white-space:nowrap}
    .et-offscreen{position:absolute;max-height:0px;max-width:0px;top:-9999px}

    I Just thought of another feature while I’m here…

    On hover highlights with Screentip. Only if you have nothing else to do 😉

  16. Hi, perhaps from the Webpart Title’s description under advanced? If not perhaps a section in your code that allows you to Hardcode in T1=’blah blah’,T2=’hello, this tab shows…’

    The other thing that I think I have mentioned before, is the ability that once you select a tab, if you were to click that tab again it would take you to a different page via the url you input into the webparts title url.

    • Tony, I like your first option, and I’ll try to include it in v5.1.

      I sometimes hardcode content for specific customer requests, but I want to keep the public solution clean, so I’ll rule out the second option. With most of my solutions, the motto remains “one central script to rule them all”.

      As for the click behavior, I don’t plan to include it in the public solution either. I am concerned about the usability of such a solution, and I have never seen it in other tab solutions. I still see many inexperienced users who are confused between simple click and double click.

    • The ability to easily click into the web part based on the title URL is already available, just not on the tab. When you choose appearance of ‘Title’, the web part title actually shows below the tab and it is clickable to take you into the native web part. At least that is the behavior I am seeing on a web part page.

  17. I went to your site where you have the video that shows how to use the tabs and i saw the code for the tab but i was expecting an actual web part to download to my sharepoint. Am I to do somethign with the code you provide? if so, what? I’m sorry but I’m not a developer and I’m trying to piece this all together.
    thanks

    • Linda, because of SP 2010 I changed the way I deliver the scripts.

      The video is a little bit old, all the instructions you need should be on the new Easy Tabs page, under the “Instructions” tab. If you need clarification on some of the steps please let me know.

      • Hi I am new to SP and EasyTab, can you please let me know step-by-step to upload the script to SP and then use it please. Thanks in advance

  18. Kerri, yep was just looking for a neater solution. On my home page, I have tabbed 5 ‘News’ webparts and it wouldn’t really fit with two lines. Tabs and headers. Still I have another way around it. As all of these webparts were dataviews created in SPD, I added a small seperator with a link to another url on the top.

    Christophe you are probably right. Some of my users have great difficultly double clicking 😉

  19. Pingback: Easy Tabs: Even Better with Print Friendly! « Path to SharePoint

  20. Pingback: SharePoint: Extending the DVWP – Part 30: Using EasyTabs with Filtered DVWPs to Make Data Manageable | EndUserSharePoint.com

  21. Pingback: SharePoint: Filtering with Web Part Connections | EndUserSharePoint.com

  22. This is very nice functionality.
    2 questions:
    1) Is there a reason you didn’t pull the colors from the SharePoint Theme and use classes for the tabs that map to the tabs used at the top of the page?
    2) I know this is a content Editor version which is nice in scenarios where CE is allowed, but many DoD locations are tightening down CE scripting. Have you thought of putting this into a wsp and putting your properties into the browseable properties?

    • Thanks for the feedback!

      1) I built a script that could work in both SP 2007 and SP 2010. As the themes and classes are different, I chose to include specific Easy Tabs classes directly in the code. What I am reusing however are default gradient images that exist in both versions.
      The previous versions of the Easy Tabs were for SP 2007 only and reused existing classes.
      I could build a SP 2010 only solution. But in the past users have actually expressed the wish to choose their own colors, and differentiate the Easy Tabs from the main navigation.

      2) I like the idea, but I am not (yet) familiar with building wsp solutions.

  23. EasyTabs are really great but I have one problem. I am using a Site with DataSheet Views. These are not working with EasyTabs. Is this a known issue?

  24. Hi Christophe,

    Once again fantastic work, I’ve been using the majority of your scripts for one purpose or another. They are great!!

    My only question is there a way to force EasyTabs to ignore a Webpart (without hiding it from the page). The only reason I ask is I would like to include a title web part but whenever I add it the Easytabs script picks it up and hides it under a tab. (obviously the desired result for the remainder of the page)

    Thanks
    Gary

      • Thanks Again Christophe,

        I see what you mean, I have now changed the page layout alltogether to make this possible however previously this was the situation I was in.

        [Title WebPart]
        [WebPart1]
        [WebPart2]
        [WebPart3]
        [WebPart4]

        I would like to include the 4 webparts with easy tabs excluding the TitleWebPart, is this possible at all?

        Thanks
        Gary

        • You can create a new web part zone using SPD (I just copy/paste the code and rename the ID) above the zone you are working with, and drop your title web part there.

  25. There are great, plug and play! Is there a way to have it default to Expand All when the page first displays?

      • Thanks, that works. One more question. Is there a way to have no tabs expanded when you first display. In other words, just show the tabs and nothing else until a tab click is performed.

        • Another fun idea! And interestingly my script can answer your requests with only minor tweaks…
          Instead of “activateTab(etTab[m]);” at the end of the script, just use “activateTab();”. As there is no tab as argument, no tab will be activated and all the Web Parts will be hidden.

  26. LOVE this code! I actually use a few of these on a single web part page that contains multiple zones (for layout purposes), is there a way to to modify the code so that it can launch a print preview window for the entire page and all zones?

      • Pretty much, but without having to go through the trouble of creating a print.css or modifying the masterpage since you have exactly what I want with that last print tab.

        Getting that plus figuring out a way to load your ‘expand all’ solution you gave Rob above only when print is selected, would put me in a tabbed web part print friendly utopia!

  27. This is simply amazing. i’ve never seen such a smart easy control for sharepoint. Great work.
    I have two questions.
    1. How can i display the webparts in vertical tab view?
    2. How can i show 2 sets of tab in one page? (now i have placed u’r scripts two times in two CEWP..it’s working fine…is it the right way?)

    Thanx in advance for your good support.

  28. Jim:
    1/ This can be done, but it’ll require some heavy lifting in the code. You’ll need to identify a placeholder for the tabs, and change the styles to display them vertically.
    2/ Yes, you can place the script in two different Web Part zones, it’ll create two independent tabbed interfaces.

    • Christophe, you said that it can be changed to show vertically. What placeholder do I need to identify for the tabs and what changes to the styles would need to take place? Could you provide an example of what to change? By the way this has been such a great tool for me, thank you for building it.

      • Scott: I talked about “heavy lifting”, it’s definitely not something that could be done in a snap or explained in the comments section!
        To be honest, I would need to rediscover the code as it’s been almost 2 years since I stopped using the Easy Tabs, and moved to a commercial version that is more solid and makes such changes much easier. Actually I just published a demo today on this blog!

  29. Hi Christophe,

    I have been using version 4 and am trying to updgrade to version 5. Can you provide a few more details on how to install the new version? Can you also providse a little more information on how I can show two independent tabbed interfaces? You mentioned placing the script in two different web part zones?

    Thanks!

  30. Candice, the procedure is basically the same. Make sure you place the Easy Tabs Web Part below the Web Parts you want to tabify. If you have a specific issue feel free to post it here or contact me by e-mail.
    And yes, you can have two tabbed interfaces in two different Web Part zones, just add one Easy Tabs Web Part in each zone.

  31. Is it possible to group alway 2 following Webparts in one tab. For example Tab1 (Title = ContendEditor1): ContentEditor1 + List1
    Tab2 (Title = ContendEditor2): ContentEditor2 + List2
    …

  32. How do I prevent the printed solution from separating each web part on a different page?

    If I have 6 web parts in tabs and go to print, it prints out 6 pages. Is there a way to consolidate the web parts on a single page?

  33. WOW! nice work!
    1 Q: say that i’m using 5 page viewer web parts, and tabed them, how to make sure that the size of them will fit any “tab”?

    • Effie, I am not sure I understand your question, but basically SharePoint resizes the layout based on what is displayed on the page. If you want to force a specific size, set up all your PVWPs to a fixed width value.

      • What i was aiming is to have the size of each PVWP (on the tabing) be almost maximize.
        So, i’ve done what you recomanded and i’ve fixed the W/H and this did the trick, all the PVWPS looks the same in size! impressing!

        Again, excellent work!

  34. OK, i’ts working excellent, i’ve set the W/H , and work fine.
    1 Q: i’ve added 5 PVWP, and it’s linked to a reports (ssrs), it’s take ~10 secs to load. Is it possible to display something like “Please wait, data is loading” until the 5 Web parts will be loaded?

  35. This is awesome! So simple yet so powerful. Only thing, how can I increase the number of rows without using an additional WP section? The SP powers do not allow the use of Designer so I’m stuck at having to create a new page and re-do all the webparts (23!) I figured out how to have the second row start after the 6th tab, but it then moves the other 17 to the second tab.

    • Well, rinse and repeat as needed. My advice: start from the end for better control.
      Also, you should consider splitting your content across multiple pages. Remember that even if they are hidden, the 23 Web Parts are still loaded on the page.

  36. Hi, The Easy tabs are just fantastic.
    But, I have a doubt. I have 3 different web parts & I want to attach each of them to the Tabs. How do I achieve the same..?? Pls. tell me
    Thanks in advance..

  38. Christophe,

    I am trying to provision easy tabs 5.0 (2010 version) for in my site definition’s onet.xml. It for some reason fails the moment I add your script in CDATA tag. I tried HtmlEncoding the script but it failed with that even. Is there anyway I could essentially use your web part in my site def??
    Thanks.

    Ali

  39. I found the answer to the above problem myself. Place the content in the CEWP file in a js file, put the js file in 14 hives (1033 folder, else CEWP may throw an error) and reference the js file throw CEWP.

    Thanks

  41. Christophe, I’ve been using this very elegant solution for a while now and made a couple improvements to one of your previous versions that I found useful. Something to think about for v6… I can send code if you want
    Added ability to:
    – only make tabs below this web part in a zone
    – can put multiple EasyTabs on a page in seperate zones w/o modifying code
    – skips web parts with no header or ‘(no tab)’ in title. Shows these WPs when the one above it with a title is activated. (great for picture headers)

    On a seperate note, I too would love to convert Sharepoint’s “Views:” drop down in the upper-right to a tab layout like Julien. But the ugly MS javascript for views was too rediculous to figure out. I usually create static links or tabs to the good views.

  42. Hello Cristophe. Thanks for your great work
    One question only. Is it possiple to put more web parts under a single tab?

    Thanks again
    Alberto

  43. It would be great to be able to link to a web part page and have a specific tab selected. Would this be possible and is it likely this will be available in the (near) future?

  45. Hi,

    Your Easy Tabs are great!

    I ahve a question. It seems once you click on a tab and close the browser, when you open the page again it will always default you to the last tab selected. Is there a way to force it so it always default to the first tab instead?

    • Lauren: this can be done by removing the cookie in the script. But I don’t recommend it, because this will trigger other issues. Example: if you have an action that forces a page refresh, the page refresh will reopen the first tab instead of the current one.

      An alternative would be to keep cookies but limit their lifespan.

      • Christophe, when you say remove the cookie in the script is it just a case of literally removing the 3 instances in the bottom line of the script? Sorry to sound simple…. but I’m new to Sharepoint (so in comparison to your good self I am simple!!!).

      • I have been searching for the same solution. I have several pages that all use the easy tab. when i go from one page to the next, rather than defaulting to the first tab on the next page, it defaults to whichever tab was last chosen on the previous page. i’d like it to default to the first tab when first visiting a page.

      • Hello Christopher…
        I am using your Easytabs solution with the SPJS solition from Alex and it works great! I have added a script for “Loading” meanwhile the charts are displayed but this is only possible for my first tab (not sure why) and I need to always load the first tab when the users goes to another link and comes back, to be possible appears the loading message that is loaded only on the first tab.

        You have mentionated to limit their lifespan.. any idea how? Should I need to add a new script to clean the cookies or reduce their lifespan?

        Also I have tried to comment the function activateTab(t), but doing this the tab are not displayed… any idea to help me with that?
        Thank you very much!

  46. Hi Christophe,

    Your work is really first class and amazing. For the time being, I have a hack which may help others solve the calendar issue.

    1. I put my calendar as the last item in the zone (right below the HTML Form Part (CEWP) in that zone. For the moment, that means the calendar is always displayed below all the other tabbed webparts.

    so the screen would look like this

    Tab1 Tab2 Tab3
    —- —– ——
    : : :
    : : :
    : : :
    : : :
    : : :

    –> CEWP with EasyTab v5.0 script

    —————–
    Calendar
    # # # # # # #
    # # # # # # #
    # # # # # # #
    # # # # # # #
    # # # # # # #
    —————–

    2. Then I go back up where the other webaparts are and I add another CEWP that only has for the source. I Change it’s title to “Calendar”

    So now the screen looks like this
    Tab1 Tab2 Tab3
    —- —– ——
    : : :
    : : :
    : : :
    : : :
    : : :

    –> CEWP (contains empty div – i.e. )
    –> CEWP with EasyTab v5.0 script

    —————–
    Calendar
    # # # # # # #
    # # # # # # #
    # # # # # # #
    # # # # # # #
    # # # # # # #
    —————–

    This works because the EasyTabs script gives the “blank” CEWP it’s own tab with the title “Calendar” so that when the tab is clikced, the blank CEWP doesn’t display anything and the calendar appears right beneath the tab as expected.

    Now what I need is a script that hides the calendar on the page unless the tab with title “Calendar” is clicked. If anyone has such a script that would save me time.

    Charles

    • Charles, I see what you’re doing, but I am not sure about the purpose, and which calendar issue it addresses. The problem mentioned in my post is a Microsoft bug, so I guess you’ll also get it with your method.

  47. Hi, I am new to SP 2010, can you please let me know step-by-step how to upload this control to SP and then use it on the page please. Thanks for your help in advance.
    Kind Regards
    PM

  48. Thanks very much for posting. I’m porting this over to a custom SharePoint layout… so in doing so it broke because our classes and IDs are different. In doing so, I had an issue with really long content spilling out of the inactive tab(s) and all I did was change the CSS of .et-offscreen to display:none. Was there any reason why the original code uses a min and max height with a position off the screen? I’m just wondering since display:none is simpler, but there could be an issue I’m not seeing at the moment with this modification of mine. Thanks again ~ pj

    • I think display:none should work just fine. I chose the offscreen method to avoid interferences with other Web Part settings, and in the hope that it would work better with calendar views.

      • Gotcha- as with my other comment, we have different layouts so changing to display:none helped solve an issue that our setup caused. Thanks again for posting ~ pj

  49. Just thought I’d pass along a little change I made to help end users @ my organization. By default, the ‘active’ tab is based on the WebPart with the lowest ID number (whichever was added first). To help my users, I modified the JavaScript so that it always selects the active tab as the top most web part in the zone with the EasyTab code. Here’s how I did it:

    – I added a var: tempID = “”;
    – Added an if statement that assigns tempID a value on the first pass in first for loop (around line 65 of the JS).
    – -After the line WPid = “et” + WPid; I added if (tempID == ”){tempID=WPid;}

    – Lastly, I changed the activateTab call (near line 188) to read: activateTab(etTab[tempID]);

    So- this way, the activateTab function uses the first web part as opposed to “m” which is the lowest numbered web part.

    • I am surprised by your comment. The script should just pick the Web Parts in the order they are displayed – top to bottom. Then, it activates either the first one (top) or the active one from the previous visit (cookie).

      • Thanks for the follow-up. It must be specific to our layouts then. Our layouts are customized so there were some ID’s that changed in the JavaScript, but really only one line of JS code had to change for them to work.

  50. Hi Christophe,

    Your Easy Tabs are great.

    I would like to add a Title “News” to the et-tabrow. How would I do that using your script?

    Thanks,
    Kim

      • I have several different tabs for various news sources, but I would like to add a text to the et-tabrow, how would I do that?

        Thanks

        • Kim, it seems that you have a very specific need, and it’s hard to provide an general answer.
          Are you familiar with JavaScript? If so, see how I do the tabrow split in the code (split=”yes”), and you could do something similar.

  52. I modified my custom version of EasyTabs to include a way for users to link directly to any tab… so I thought I would share in case anyone else is interested.

    In my version, I wanted the add an anchor to each tab based on the tab’s title that would trigger it as the active tab. I also wanted to remove spaces and force the nchor to be lowercase. So-around line 75 of the javascript I added this:

    //add a name attribute to the tab’s span
    etTab[WPid].setAttribute (‘name’, d[i].getElementsByTagName(“span”)[0].innerHTML.replace(” “, “”).toLowerCase());//new code to add anchor name
    if ( (String(self.document.location.hash.substring(1)).length > 0) && (String(self.document.location.hash.substring(1)) == d[i].getElementsByTagName(“span”)[0].innerHTML.replace(” “, “”).toLowerCase())) { //if the URL contains an anchor //&& the anchor contains no spaces and is all lower case and it matches an existing anchor in this loop //then assign the activeAnchor activeAnchor = WPid; }

    At the end of the JS you’ll want to wrap a statement around the activateTab call. The below statement checks to see if an anchor was assigned and if so it activates a different tab based on the #anchor that’s added to the end of the URL.

    if (activeAnchor != “”)
    {
    //if an anchor is present in the URL then open the desired tab
    activateTab(etTab[activeAnchor]);
    } else
    {
    //if no anchor is present in the URL then just open the first tab
    activateTab(etTab[m]);
    }

  53. this is great – the only problem I have is that the hidden option in layout is disabled on my webpart – any ideas what i’m doing wrong?

  54. Are you aware of any problems Easy Tabs causes with RSS feeds? I have multiple RSS feeds rolled up by easy tabs and I am finding that they do not update properly… I have explored a variety of potential causes but I have not concluded that it isn’t caused by easy tabs.

    Looking forward to hearing from you if you get time. By the way we have fallen in love with this feature and it is used almost everywhere on our platform, awesome work – thank you.

  55. I would like to added an additional separator, such as a space just before the Expand All, so as to set the Expand all and Print slightly apart from all the other tabs. Do you have a code update suggestion? Thanks!

  56. Is there a way to make the Print Preview go to Expand All by default? And then if users want to switch to a single tab to preview, they could then do that. I have heard from a user of this that she was confused that Print Preview did not preview all. After thinking about it, it kind of makes sense to me. Thanks in advance.

  57. Hi Christophe. Easy Tabs are beautiful and I’d like to use them for some document management work I’m doing.

    We have a bunch of Word docs we want to migrate to SP in a standard format so each document will have the same sections – Overview, Rules, Processes, etc. I can happily set up a page with a group of CEWPs with Easy Tabs and copy/paste the relevant sections from the Word docs to create one of these documents, but creating a second, third, …, seems to require recreating all the CEWPs from scratch.

    It seems a basic question but I’ve scoured the Web without finding a solution: how can I use my first page as a template?

    I’ll be very grateful for your thoughts.

    • Web pages only know one format: html. A way to address your issue would be to save your first page as html, and then use a CEWP or a Page Viewer Web Part to display it.

  58. Hi Christophe. First of all – this script is awesome! I included it in one of my sites and it worked directly. For people who are using a german version of Sharepoint: You have to change the line “if (d[i].innerHTML.indexOf(“(Hidden)”)==-1)” into “if (d[i].innerHTML.indexOf(“(Ausgeblendet)”)==-1)” to hide hidden webparts in the tabs.

    Best regards,
    Markus

  59. Hi,

    Does anyone have the hover code for the stylesheet?

    I have tried .et-inactivetab:hover{background-color:#5a87dd;} and it doesn’t seem to work.

  60. I had a display issue with the tabs that no one else seems to have seen. I am posting my resolution in case it helps anyone else. Basically the first tab was displaying correctly but for every other tab the web parts were shifted to the right of the tab control, completely out from under the tabs. I tried a lot of options with css and found that the only way I could solve it was with a little DOM manipulation.

    First I changed the css for .et-offscreen to display:none, as much of you had.

    Then I added the following jquery snippet to the javascript.

    $(document).ready(function() {
    $(“.ms-PartSpacingHorizontal”).parent().remove();
    });

    This removes the extra td’s that were being generated between webparts with horizontal spacing. This should be pretty safe as the parent of the horizontal spacing always seems to be a blank td.

    My html before:
    WebPart

    My html after:
    WebPart

    Seems to be working fine for me. Obviously this will cause issues if ms-PartSpacingHorizontal exists in other areas of the page. But I haven’t seen any issues with web parts not in the tab area.

    Any other thoughts on solutions are appreciated. Also validated my problem on Opera, Firefox, Chrome, and IE7/8.

    • Looks like it converted my html. What it should say is:
      Before:
      “WebPart”
      “”

      After:
      “WebPart”

      Hope that works.

    • Ryan, thanks for posting this. Apparently this issue is with Web Part zones with a horizontal layout (something that obviously few people are using). I’ll need to fix this in the next release.

  61. How does one edit the content of the tabs (Content Editor Webparts) after this script has been inplemented.

    I’m on SP 2010 and when I edit the page I can see the Webprt that links to the Script, but I cannot see the Webparts that are the “Tabs”

    Any ideas … anyone?

    • Kazz, that is surprising. The script should not run in edit mode, and all Web Parts should be visible. What kind of page are you on: standard, wiki?

  62. Hi Christophe. I’ve tried your script, but it doesn’t work. I’ve tried just with a couple of standard uncustomized XsltListViewWebPart, and i’ve tried both in standard and wiki page.

    Any idea? Thanks!

    • Update: SP Foundation 2010. Tried both SP2007 & SP2010 style options and without any other extra option. Spanish Languaje.

  63. First off, I would like to say I am excited I found this code–this webpart is amazing! I added this in SharePoint 2007 and it works great. We are currently upgrading to 2010 and we are considering using this code for a couple of summary link webparts in the rich content part of the wiki page in the enterprise wiki site. I have some free text above the summary link webparts that I would like to remain outside of this easy tabs section. However, I can’t figure out how to exclude the free text from it. Any ideas?

    • You would need to write a custom version of the Easy Tabs to make this happen.
      In v6 (will be released by the end of the year), the Easy Tabs can start after the nth Web Part. It means that you could place your free text in a Content Editor Web Part.

  64. The new tabs are great, anly downfall is my users like bein able to split it into webzones (i.e. with Easy Tabs 2.0 and Easy Tabs Bis 2.0) will there be an easy Tabs v 5.0 Bis?

    • With v5, you can use the same code in different zones of the page. Store the script in a document library, then link to it from multiple CEWPs.

  65. Hi Christophe

    I’ve read all the comments and can’t find the answer to my question. I have added an CEWP in one web part zone on a page layout. After linking to the text the other 6 web part zones are no longer displayed on the page. A similar thing happens when I use the Image Rotator. Am I doing something wrong or is there a way to prevent the script from affecting other web part zones?

    Thanks
    Andrew

    • I don’t know why this is happening. My script works on the standard SharePoint pages, maybe your company created a custom layout? 6 Web Part zones doesn’t sound like a standard SP template.

      • I am experiencing the exact same thing. We are using an OOTB page layout that has multiple web part zones. The tabs web part is currently the only one inside its own zone; web parts above it are in other web part zones. But when I save the page, all the web parts are tabbed, regardless of which zone(s) they live in.

        Web part zones below the zone containing the tabs, however, are not affected. So I guess our workaround would be to put the tabs in the topmost web part zone. I’ll have to clear that with my manager first.

        Ideally, I’d like to find out if I’m doing something wrong.

        • Eddie, what is the point of having only the tabs Web Part in the zone? The script would expect at least two regular Web Parts to create a tabbed interface.

        • Hi Christophe,

          The behavior occurred before I had a chance to add any other web parts to the tabs zone. I wasn’t expecting tabs to even kick in until I had finished. Next thing I knew, I’m looking at all the web parts from all the other web part zones being tabified.

          We have successfully used your web part on other SP 2007 sites and a 2010 site elsewhere I’d put together. So I’m sure it’s something weird with this one particular site collection.

          It did work properly once I removed it from the page layout and just drag-and-dropped it into SP via IE. As much as I’d prefer to have it as part of a page layout, this will do for a workaround, and I’m sure we’ll try it again on another site / page layout.

          It is a great tool you’ve put together. Saved me the trouble of having to figure out how to creat this myself. Thanks for all your hard work. 🙂

        • Eddie, thanks for the feedback. It makes perfect sense now.

          The way the current script works, it discovers the content of the page. The benefit of this approach is that server side changes won’t affect it much (this is even more the case with version 6). The drawback is that the script doesn’t understand what’s going on when there are no sister Web Parts within the zone.

          Good point, I just don’t have an immediate answer to this.

  66. This is an awsome tool, and I have been using it for some time.
    I am making use of the 2 rows option. However, I have been required to display the tabs in more than 2 rows. Is there a way to have the tabs displayed in 3 or more rows?

      • As I told you that I am using vertical tabs could you help me how to display content of a tab under that particular tab help me , i am waiting for your reply……………

  67. Hi Christophe,

    Thanks for the amazing solution! I’m looking at using it on an SP 2010 site, with calendars. When I ran into the calendar rendering problem already noted, I realized that the web part would render correctly after a manual refresh. I added a refresh command to the etTab[WPid].onclick function in the script (after the call for activeTab(this)). Not an elegant solution, but it did the trick for my needs.

    • Thanks for sharing Isaac. Right, a page refresh seems to do the trick, it’s just that… the point of the Easy Tabs is to avoid page refreshes!

      • Hi christope,
        Great work ,i have used ur easy tab for creating vertical tabs in sp2010, for two web parts its fine, but the number of webparts are increased its out put is not completely vertical it comes as
        tab1 tab3
        tab2 tab4 could u please help me in solving this………….

      • Quick update, I was applying some CSS in 2010 to shrink the calendar a bit, and noticed an unintended side effect – the calendar now renders correctly when changing tabs, without the need for a refresh! I haven’t had a chance to go through the code to figure out which line(s) are responsible, but thought I would share in case anyone finds this helpful.

        .ms-acal-header TD {
        VERTICAL-ALIGN: top
        }
        .ms-acal-rootdiv TD {
        VERTICAL-ALIGN: top
        }
        .ms-acal-rootdiv TH {
        VERTICAL-ALIGN: top
        }
        .ms-acal-rootdiv {
        FLOAT: left; MARGIN-LEFT: 0px; OVERFLOW: hidden
        }
        .ms-acal-vitem {
        VISIBILITY: hidden; BACKGROUND-COLOR: #f2f2f2
        }
        .ms-acal-month-weeksel {
        VISIBILITY: hidden; WIDTH: 16px
        }
        .ms-acal-summary-dayrow TH {
        BORDER-RIGHT: #b6c5c6 0px solid; BORDER-TOP: #b6c5c6 0px solid; VISIBILITY: hidden; BORDER-LEFT: #b6c5c6 0px solid; CURSOR: pointer; BORDER-BOTTOM: #b6c5c6 0px solid; BACKGROUND-COLOR: #ced8d9
        }
        .ms-acal-month-top {
        PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; WIDTH: 90px; COLOR: #919649; PADDING-TOP: 2px; BORDER-BOTTOM: #b6c5c6 1px solid; TEXT-ALIGN: center
        }
        .ms-acal-summary-dayrow TH {
        BORDER-RIGHT: #b6c5c6 0px solid; BORDER-TOP: #b6c5c6 0px solid; VISIBILITY: hidden; BORDER-LEFT: #b6c5c6 0px solid; CURSOR: pointer; BORDER-BOTTOM: #b6c5c6 0px solid; HEIGHT: 0em; BACKGROUND-COLOR: #ced8d9
        }
        .ms-acal-summary-itemrow TD DIV {
        MARGIN: 0px 1px; WIDTH: 90px; HEIGHT: 40px
        }
        .ms-acal-vlink IMG {
        VISIBILITY: hidden; MARGIN-RIGHT: 3px
        }
        .ms-acal-vlink A {
        VISIBILITY: hidden
        }

    • Hi Isaac/Christophe, can you please post the code with the refresh command. I would like to try this. Thx, Kim

      • Search the Easy Tabs script for:
        “etTab[WPid].onclick=function(){activateTab(this);”

        and after the semicolon but before the following “}” add:
        “window.location.reload(true);”

        Just be aware this will cause a full page refresh, which as Christophe states above goes against the point of Easy Tabs. Depending on what you need to achieve you may be better served putting in the CSS scripting I mentioned above to control the size of the calendar, which then allows it to render correctly when switching tabs.

        Hope this helps,
        Isaac

  68. Hi Christophe,
    I attended some of your workshops with EndUserSharePoint.com and I have a question in reference to Easy Tabs.
    I’m using your Easy Tabs Lite v.4 and been trying to place a photo on top of the tabs. I can’t figure it out. Here is the situation, we are using SharePoint 2007 for our Intranet, on the home site we have a photo of the hospital. I’m using four (4) Content Editor Web Parts for the following:
    1. Hospital Image
    2. General Quick Links
    3. Clinical Quick Links
    4. Administration Quick Links

    Thank you for your time,
    Frank

  69. Hi

    Great Tabs!

    Do you know if there is a character limit? I have one field on my sp site that is blowing out and displaying in a narrow column down the page, on top of the text of all the tabs

      • I have the same problem. What might be causing it?
        If I cut the content into half and move it to another tab, the problem is solved. That’s why I suspect that it might be due to character limits as well.

        • I did a test and word count. It was fine at 1275 words/6547 characters (no spaces)/7846 characters (with spaces). The moment I add another word, it creates the problem, and the extra word(s) will be displayed in a narrow column down the page, overlapping on top of the text of all the tabs.
          Any tips to solve this problem? I don’t want to cut the content into two parts, because it will not make sense to have part of it in a different tab.

  70. Chistophe, thanks for this great solution. I’m trying to use Easy-Tabs for a intranet site for our product engineering teams and I have created four CEWPs for each product team. Everything looks great except that I don’t want to show the Title of each CEWP within the body of each tab. I’ve tried setting the Chrome Type to ‘None’ to hide the Title, but when I do that the content of the CEWP merges back into the previous tab. Is there a way to set this up so that the Title of the CEWP doesn’t display within the body of the tab?

  71. Nevermind, I figured it out. I set Web Part Headers to ‘Hide’, re-generated the code from the wizard, re-uploaded the script and that did the trick! 🙂

  72. Hi Christophe,
    I’ve been trying to use Easy Tabs with an Advanced Search Web Part. I recalled that Easy Tabs allowed Advanced Search Web Parts in 2007, but now in 2010 I cannot get it to work. The Advanced Search Web Part (and other search web parts for that matter) just display below the content of the Easy Tabs.

    Any suggestions?

  73. Christophe,

    Easy Tabs v5.0 works great, Thanks!

    However, I have a question… Is it possible to modify the code so related web parts are displayed when specific tabs are selected, but not when other tabs are selected?

    For example, maybe I have a Support tab and a Sales tab. Could be I have an announcements web part and a calendar web part (along with other items) that are specific to one group, or the other. What I’d like to be able to do is display all “Sales” related web parts when the Sales tab is selected, and all Support related web parts when the Support tab is selected.

    Please tell me, is there any way I can display “related” web parts as visitors select different tabs?

    Thanks,
    DF

    • Christophe,

      I have another EasyTabs question 🙂

      Is there any way to specify the active tab as part of a pages web address?

      Thanks,
      DF

  74. Is there a way to have muticolor tabs(more than 2 colors)?

    by this i mean, for example all the inactive colors are the same color(“GRAY”) and the Active tab is the same color(“YELLOW”) for all except one, if clicked that tab would be (“GREEN”)?

  75. Hi Christophe,

    Really nice work – thank you!

    I am using the SSRS Report Viewer to display a report that has column sorting enabled but unfortunately the sort controls don’t work when embedded in a tab. Do you have any clue what might fix this?

    Many thanks,
    Ashley

    • Sorry Ashley, I haven’t had a chance to try that. Normally the Easy Tabs should not make any change to the Web Part itself, just toggle the display between visible and hidden.

  76. Hi christope,
    Great work ,i have used ur easy tab for creating vertical tabs in sp2010, for two web parts its fine, but the number of webparts are increased its out put is not completely vertical it comes as
    tab1 tab3
    tab2 tab4 could u please help me in solving this………….

  77. As I told you that I am using vertical tabs could you help me how to display content of a tab under that particular tab help me , i am waiting for your reply……………

  79. Hi Christophe — Easy Tabs are a great solution. Thanks! We recently upgraded from SP2007 to 2010 and now I can’t use the expanded group view with Easy Tabs. Collapsed groups still work fine, but expanded groups cover the entire page overlapping other tabs. Makes quite a mess! Is there a way to fix this?

    • Marisa, try to replace the offscreen style:
      .et-offscreen{display:none;}

      Just pushing the Web Part offscreen might not be enough if the content is too long…

  80. Hi cristope ,
    as you have given a code to split the tabrows where index= math.floor(tabcount*0.5);
    this splits the rows into 2 rows,
    now i want to split it into 6 rows can i change it as (tabcount* (1/6))
    is it possible……. please reply me as soon as possible please…..

  81. Hello,

    I thought it would be good tool for me to use on my Sharepoint Site and I followed direction but I can’t get EasyTab to show up on my page. When I inserted web part for easy Tab I just dont see anything. Am I doing something wrong?? I am using Sharepoint 2010 Ent.

  82. Easy tabs isn’t a web part, it’s some cleverly crafted javascript code that creates a tabs view of other web parts on the page.

    To use it you need to add the web parts you want tabbed, then at the bottom of them all, put content editor webpart, edit the html source for the content editor, paste in the code, then edit the settings for the content editor webpart and hide it so that it doesn’t become a tab itself.

    If you can’t perform the above steps, google is your friend.

    To get the code, configure it here, you can change the colors too, then when you click that you agree with the licence, it will show the code and you can copy and paste in to the content editor as described above.

    http://sp2010.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Easy-Tabs-v5.aspx

    • I followed steps from the site and did it without any problem. But in view mode nothing appears and I cant even get to edit more for easy tab.

      • JL – I’m in the same boat. I’ve used previous versions of EasyTabs with no problems. But, I cannot get this new version to work at all. I’ve tried on a couple of different sites too. Did you get your problem resolved? And, are you using IE? If so, what version? I’m trying to figure out if IE9 is causing problems that i about the only thing that is new in my environment from one EasyTabs version to this one.

  83. Hi,

    I was successful in creating the tabs, however I can not create a link to specific tab. For exampleI have 5 tabs and i want to be able to email a link to tab #4 so that when the receiver get the msg and click on the link they are taken automatically to tab #4 and not to the first tab.

    Can anyone help?

    Thanks!

  84. Hi Christophe,
    Thanks for TABS. If only I’d come across it earlier !!!! Works just as I expected with one issue. How do I link to an Bookmark point within a different tabbed Web Part.

    I have 3 CEWPs tabbed, let’s say they are Overview, FAQs and Pricing for a product. Within the FAQ CEWP I can link down to an answer from a list of questions at the top; as expected. But from the Pricing CEWP I need to do a “see this FAQ” type link within the FAQ Web part.

    For example; using bookmark “aaaFAQ21” the link I’m using is “http://sharenet/retail/SP/Products/Pages/AAATabsTestpage.aspx#aaaFAQ21”

    As I said it works within a CEWP but not between tabbed CEWPs where it just seems to refresh the page and not change webpart.

    New to sharepoint, new to programming, new to web design….so please keep any suggestions as simple as possible 🙂

    Note; this would also provide an answer (obviously not an elegant one) for the earlier issue of “linking to a specific tab” as you could put a bookmark at the beginning of whatever CEWP you are trying to link to.

    Note2 the website below is our public site. I’m using the code on an intranet.

  85. Christophe,

    Is there an issue with EasyTabsV5 with the SharePoint 2007 Excel Web Access webpart?

    I have an older webpart page, originally assembled with EasyTabsV2 which worked quite well… The page has two Excel Web Access webparts, and seven list view webparts. Everything worked well, EasyTabsV2 doing an excellent job until…

    A change to the Excel file displayed in one of the Excel Web Access webparts is not rendering perfectly (just missing the a scroll-bar), so I thought to try EasyTabsV5 — and am amazed that it doesn’t work at all with the Excel Web Access webparts! The result is a scrambled page, with portions of each web-part splashed around the screen and even overlapping!?!

    Right now, the imperfect rendering of one of the Excel Web Access webparts in EasyTabsV2 is the least of my choice of evils, but would love to keep pace with your newer version.

    Any suggestions? (And many, many thanks!)

    R’grds – Ben.

  86. I have a page where the layout is two columns with header. I have EasyTabs running in the left hand column and it works really well. My only issue is that as different tabs become active the right hand column moves horizontally quite a lot due to the different widths of the web parts that make up the tabs.

    Is there a way to fix the position of the right hand layout zone?

  87. Great tool! One problem. The Hidden button is greyed out so we can’t check it. The title for the Easy Tab CEWP appears as one of the tabs. How do I fix that?

  88. Christophe,
    After I left my comment/question yesterday, I did some furher research. It appears that the Hidden button will be greyed out on site pages in Foundation 2010. The Hidden button is active for web part pages in Foundation 2010. The tool works great on web part pages. However, most of our users want easy tabs on the homepage and it is a site page.

    So, is there a change we can make to the code that will automatically hide the CEWP on a site page? I have no practical knowledge of the code in order to do this myself.

    Thanks!!
    Dave

    • Catching up, and I just responded to your previous question. Another option is to change the site home page, and use a standard Web Part page instead of a wiki page.

  89. Christophe,
    Great tool and thanks for making it available. Maybe this will be addressed in 5.1, but here goes:

    I have a SAP user training area that is broken up by 8 BAs (Business Areas) and within each BA, there are a number of courses identified by CourseID (47 ecourses total). Within each CourseID, there are a number of unit lessons, exercises etc. After a student user completes each course, they need to take a test.

    What I’m looking for is EasyTabs with 2 tiers:
    1st Tier should be the BAs, e.g. “EDU”, “ACQ”, “FIN”, “SAD”, etc. I’m thinking the best way to set this up for “one central script to rule them all” would be to select the metatag that will filter the 1st tier
    2nd Tier will dynamically to the 1st Tier selection by filtering the 2nd metatag.

    Since I already have one doucment list that contains all course units & excercises (approx 250 documents), so instead of creating 47 webparts (for each CourseID), how about using just the one webpart and using EasyTabs to filter the Document List by BA & CourseID on the fly? I would imagine that we admins would only have to amend your script to provide the betatag column names we want filtered.

    So the layout would look like this (double pipes represent the selected tab)

    1st Tier=|EDU|ACQ||FIN||IMW|PLM|SAD|etc|etc|….
    ————————————————
    2nd Tier=|FIN_01||FIN_02||FIN_03|FIN_04|etc|etc|
    ________________________________________________
    |FIN_02 Intro
    |FIN_02 Unit 1
    |FIN_02 Unit 2
    |FIN_02 Unit 3
    |FIN_02 Unit 4
    |FIN_02 Unit 5
    |FIN_02 Unit 6
    |FIN_02 Summary
    |FIN_02 Exercise

    Now comes the kicker. I have the webpage set up as Header & 2 columns. I want the above BA/CourseID output in the left zone, but in the right zone, I want the link to the associated test to appear. So using the above example, I would have link(s) to “FIN_02 Test1”, “FIN_02 Test2” etc. Again, these tests have the same metatags of BA & CourseID, but come from a different document list. I could put them all together in one WP, but I think it would look neater to have them separated by zones. Thanks in advance for your consideration.

    • The purpose of the Easy Tabs is to be… easy, and for this we need simple rules – for example one tab=one Web Part.

      I have done customizations similar to what you describe. In such cases you need to rewrite part of the code, as there is no way to describe the behavior with simple rules.

  90. I saved the *.txt file to my desktop then saved into my document repository. Went to page in SP 2010, edit, add web part, Content Editor. Moved the new web part to the bottom of my page (under a list). I found no where to edit this only to insert text. I am missing a step.

    • cjsigler, if I understand you correctly, you need to copy/paste the script into the CEWP’s Source Editor that will carry the EasyTab code. If you need to tweak the code, you can do it at anytime, just by clciking on the Source Editor button.

  91. That you for the clarification. I have customized my tabs and saved the file to my desktop. In SP I have a doc repository that I added the *.txt file to. I then went and edited my page. Added the CEWP. Edited the CEWP and cut and past the code into the HTML window. Added content link and tested (file opened). Changed layout to Hidden. Moved CEWP to the bottom of my page where I have two lists with content above it. OK. Stop Editing. I have a thick blue line at the top of my page (my tabs were blue) then the two lists. No tabs.

    • Might have to repaste the original code without edits to make sure your edit didn’t trash the code. The only thing that should be hidden is the CEWP for EasyTab. The others WPs above the ET should be normal (unhidden).

      For example, the only edit I did to my main page was to change “activateTab(etTab[m]);” to “activateTab();”, so that no WP would display until a tab was clicked. To display a second level set of tabs (depending on the 1st level tab clicked), I changed the script’s font & color. Still having display issues for my concept of tabs within tabs; but I’ll figure out the workaround to the question I asked originally a few days ago.

    • Don’t paste the code in the CEWP, SharePoint will certainly break it when you save it. Instead, use the link option of the CEWP to link to the file in your doc library.

  92. My agency recently migrated my sites to a new server. Everything worked fine on the old site, but on the new one I am having a problem. My tabs are all there, but when I click on a tab, the link to the actual list is not there (it used to display at the top of the web part when the tab was clicked). When I expand all, the links are there at the top of each web part. Any ideas what might have changed during the migration.

    • I reloaded my Easy Tabs text file and that seems to have corrected the problem. Sorry for any inconvenience.

  94. Hello Christophe,

    Just a quick note to thank you for this great piece of code. Helped us to build some cool presentations in no time.

    Christophe

  95. Dear Christophe,

    it’s simply amazing! but most of all end users related, thank you so much to share your knowledge ;o)
    Do you think i’m too greedy if i ask to have the same “help” for an accordion ?

    Thank you so much in advance ;o)

    • There are so many possible variations! Tabds, drop-down menu, accordion… I have such solutions, but I can’t afford to support all of them for free…

  96. Hi Can you indicate why the EasyTabs solution isn’t working in a Wiki page?
    thank you for a great webpart!

  97. Dear Christophe,

    Does the easy tab function work on a page that is NOT a webpart page?
    I have a page that is set up with the standard template layout options. (I did get it to work on a webpart page, so I know it works)

    My issue is… it is showing the tabs, but not the content below the tabs. I also notice that I am not able to check the “hidden” box, so of coarse the EasyTab is a top tab as well.

    • It should work. Feel free to contact me with more details.

      And right, in such pages the hidden checkbox is greyed out. In such case, you can change the chrome to none.

  98. Excellent solution !! I loved all your solutions posted on your site and so does all my clients !!

    Recently I got a request from client asking if we can show multiple webparts on a single tab? Is that possible ?

    Or can I have one tab per web part zone instead of per web part ?

    Thanks once again !!

    • Same reply as KT… All is possible, I just can’t afford to publish and support all the variations on my blog. The commercial version can do that.

      • Hi Christophe,
        Do you have the solution showing multiple web parts on a single tab (currently one web part gets one tab – Easy Tabs v5)?
        I would like to get this solution. Could you help me?
        Thanks a lot,
        Waiting your answer!

        • This is not available with the Easy Tabs, check out my articles about the SPELL program and contact me if you are interested in the free evaluation version! (the new version will be released in just a couple days)

        • Hi Christophe,
          Could you send me the free evaluation version of SPELL Tabs to email ngocvienle@gmail.com? I’m interested in receiving this version. And if commercial version is released, how much is it?

  99. Pingback: Links from SharePoint Saturday’s presentaion « Jim Ehrenberg of SharePoint Pros

  101. First of all, thanks much for the great tool. We have recently moved from Moss to 2010 and we are noticing an issue with the tabs (horizontal alignment). We are using Easy tab to show a task list with each tab showing different task category. In 2010, as you know, the items are displayed on the left and the timeline displayed on the right.

    Issue we are facing currently is that only the first tab is displayed correctly with the items displayed with proper column width and no overlapping data. But, rest of the tabs(7) are rendered incorrectly as item and timeline are overlapping.

    When we removed the parameter in activetab, then all the tabs are displayed neatly but the only issue here is that when the page renders the first time, all our web parts are displayed below each other on the page!. When we refresh the page, then all the tabs are displaying perfectly with all the items and timeline displaying the way it should. Would love to get past the issue of the page rendering with all the web parts/containers when the page is first opened. Any help or insight will be certainly valuable. Appreciate your inputs.

  102. Hi Christophe, Great solution. Is there an option to solve the following issue. I display serveral webpart in the tabs, also webparts from lists with limited access. When someone limited acces displays the site they see the tabs FOUT [1] and FOUT [2] (dutch for error). Can those tabs be hidden like the (Hidden) tab?

    Thanx in advance.
    Ruben van Putten

    • Well, you would have to customize your page to hide the Web Parts the user doesn’t have access to (how about using audiences?).
      Of course you could also tweak the Easy Tabs code, but the idea with the Easy Tabs is to keep the existing page content (including error messages like yours).

  103. Christophe :As you say, the page adjusts to the width of the Web Parts. What you can do is give all the Web Parts in the left column the same fixed width.

    Christophe,

    I have a similar problem. All of my web parts are assigned a fixed width – BUT, the easy tabs green seperator (beneath the tabs) pushes out to the right too much. It pushes onto my right column. Trying to make a universal layout to accomodate different sized screens (laptops to wide screens), this is making it difficult. Adjusting all of the web parts to less than the center column doesn’t seem to help. Please advise.

  104. ^ sorry Christophe, I apologize for the comment above. I’ve come to realize that the problem is not with your easy tabs, but the column they are contained within. It is set to 100% width so the easy tabs spacer pushes out to the far right.

  105. Hello Christopher…
    I am using your Easytabs solution with the SPJS solition from Alex and it works great! I have added a script for “Loading” meanwhile the charts are displayed but this is only possible for my first tab (not sure why) and I need to always load the first tab when the users goes to another link and comes back, to be possible appears the loading message that is loaded only on the first tab.

    You have mentionated to limit their lifespan.. any idea how? Should I need to add a new script to clean the cookies or reduce their lifespan?

    Also I have tried to comment the function activateTab(t), but doing this the tab are not displayed… any idea to help me with that?
    Thank you very much!

  107. Great tool. Quite sleek.
    Quick Question: Is there a way to have different colors for each tab regardless of active/inactive? For example, if I have 3 tabs, can I have tab 1 header green, tab 2 header red, tab 3 header blue?
    Any suggestions would be helpful.

    • This is of course possible, but the published version doesn’t include this option. You would need to modify the stylesheet to enable this (it can quickly become complicated if you also want individual colors on hover and on click).

  108. Hi,

    I just found out about this tool, I am new in this and I just wanted to ask how exactly did you attach the script to the Content Editor – I use Foundations and every time I try to paste the text into the Text Editor I get “Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.”
    Can you pls help me with this, I am sure its something simple

  109. Easy Tabs is awesome, thanks! I have been dissecting your script, attempting to combine two webparts underneath one tab. At the moment my implementation is hard-coded & looks for a specific WPid (WPQ11 in my instance), stores the etTab, etRoot and etHeader data into an array (etT[], etR[] and etHead[]) and then once it encounters the other specified WPid (WPQ10) I was attempting to combine the etT[“WPQ11”] data with the etTabs[“WPQ10”]. But everything I’ve tried breaks the tab for WPQ10 and both WPQ11 & WPQ10 are not included under the tabs. I tried appendChild to the etTabs[“WPQ10”] child, pushing etT to etTabs and a couple other things. Any advice or direction would be appreciated!

    • Well, the premium version (SPELL Tabs) will include this functionality. What I am doing with the SPELL Tabs is use the Web Part title as identifier. This allows to have two Web Parts with the same identifier, as opposed to the WPQxx id which is specific to each tab.

  110. I have added Easy Tabs v5 to a page with 5 document lists. They all show correctly as tabs, but when clicking on any tab (except the first) the list shows data all the way to the top of the SP page and I can still see the previous tabs list behind. It is like the code is not clearing the screen before showing the new list and also not adhering to the webpart size. Any suggestions appreciated.

    • Found out that this only happens when the lists are really long. Limited webpart to a height of 800 pixels on the longer lists and it fixed the problem.

      • I found that if I add a line across the page with extremely long contents, it solves the problem. I don’t know why, but it works.

        • Glad to hear you figured it out. Another technique that should fix the issue is to increase the offset: search for -9999 in the code and replace it with -99999

  111. Easy-Tabs is awesome, thanks for the great work on this code. I was wondering if there is a way to prevent Easy-Tabs from creating a tab if the web part has no data to display? For example, I use Easy-Tabs to display information by line of business on projects in process. However not all lines of business have active project all year. Hope this makes sense.

    • This is certainly possible, but would of course require additional code. You would also need to provide a clear rule, as in practice there is usually some content displayed even if there is no data.

  112. Hi Christophe,

    Thank you so much for EasyTabs. They are wonderful. I only have one issue with them. I use the tabs to display different lists. If I display more than 60 items or so in a list, the page looks jumbled (pages appear on top of each other). Do you know how I can fix that? I would greatly appreciate it!!! Thanks!!!

  113. Love the easy tabs work around! Wondered if there is some way to have the tabs lower on a page or to show midway the page.

    • Kay, what do you mean by lower or midway on a page? Do you mean that some Web Parts should remain above the tabs?
      This is definitely possible, but not included in the default options (it would require to modify the current code).
      Note that the SPELL Tabs allow that (including the free evaluation version).

  114. Hi Christophe

    I am using your easy tabs to get the tab structure in one of our portal. The tab structure i am able to get it but i am facing a problem. I have 6 tabs in total out of which 5 tabs have long header names and the last tab has small header name becuase of which the size of last tab header is becoming small when compared to the rest of the tabs. Is there any other way to fix this issue. I have used wrod wrap to wrap the long words to get them in two lines.

    • Sorry, I don’t have an easy answer… except that it’s better to keep titles short!
      You could try the css min-width property, but older browsers might not support it.

  115. Hi Christophe,

    Great work on the easy tabs.Does this work on SharePoint 2013 as well ?

  117. hey Chrisophe, hope you are well. it has been some time since I have bugged you. I am playing with this great script and I removed the bg colors and went with images. the active tab has an image with a down arrow to show the selected or active tab. One issue I ran into was get the bg to apply smoothly. the active image is only 30px wide, so to get it to look like the entire has the image I have to apply a bg. If I apply it to the et-tab, it gets overridden by the active and inactive tab. when I apply it to the et-tabrow, it applys the bg all the way across and it looks good. the issue I have is it appears to have no padding against the other zones and it doesn’t look clean. I have tried applying background-size, but not in the SP schema. I was looking through the code to see if I could wrap it in a container, but no luck there either. I have thought about setting the web part with, but it is the center column and I have it fluid like. really just looking for some ideas. I just need some way of applying a background repeat-x but not 100% of the et-tabrow. thanks for any suggestions

  118. I love this script and am so unhappy because I cannot seem to use it in a WIKI page, all the tabs go to the top becaue there is no defined web part zone in a wiki page. Tried using a web part page but the template does not give me the quick launch that matches the rest of the site.Tried importing the script already in a content editor webpart from a webpart page into the web part gallery, then into wiki page but that failed as well.

    Any suggestions as to how to use this in the middle of a wiki page?

    • Have you tried a webpart page, with the upper zone as a wiki page, the middle containing your tabs?

      Haven’t tested it yet, but a concept that I may get to in a few weeks. My approach is to try creating 7 wiki pages for the 7 regions that our staff works in. The webparts page would use easytabs with each webpart containing a wiki page.

      For the user, the entire page would appear with tabs on top and the rest of the page being a wiki.

      Conceptually, as the wiki grows to cover several categories, one could create another webparts page using easytabs to tab each category as the 2nd tier (use a different color scheme for this set, ie Yellow). And now the regional 1st tier (i.e. blue tabs) would tab each region by containing the category webparts page which already has it’s own easy tabs.

      • Need to clarify that to get the tabs to display in the middle, you need a webpart page that is formatted with header and columns. The tabs go in one of the columns and your upper content in the header

    • Marie: that’s right, the Easy Tabs need a zone as reference. The new SPELL Tabs released this year are more flexible because 1/ they explore the page rather than making assumptions and 2/ you can position the tabs within the page.

      • I guess I am not clear with the “image tag of the web part”. Are you referring to the Advanced part of the tool pane in the content editor web part? where the Title Icon Image URL is located?

        I don’t have the privilege of using a web part page that doesn’t match the rest of the site’s Quick launch menu. If I could replicate it in a web part page, then I will do so but I have only so many hours for the scope of this project and this goes beyond the hours dedicated. I just need something simple, like easy tabs. If Spell tabs would be just as easy to use, then I am interested in attempting.

        • Marie, I think you are mixing two threads – the image tag was a response to Andy’s question, not yours.

          As for your request… keep in mind that nothing comes for free 🙂 The SPELL Tabs are still new, and just like the Easy Tabs they’ll certainly evolve in the next few months, based on the feedback I get from the early adopters.

  119. What I want to do is alter the code snippet so that when it’s grabbing the webpart title, I could also have it grab the TitleIconUrl of the webpart? I would like each tab to display the icon before the title.

    I’ve tinkered with the script trying to use WPid to get the WP’s title Icon url but failing.

    TIA

    PS. For those that might like this concept, what I’d plan on doing since 16×16 px is too small (default for webpart title icons), I’d use css to set the icon height at 24px or 32 px, while allowing the width to scale, since these so-called icons aren’t square, and some of my intended images are wider than the height and others narrower.

    • This is also something that is built in the SPELL Tabs (although not activated in the default configuration). What you need to do is grab the first img tag of the Web Part and then get its src attribute.

      • Chris,
        I am still interested in trying it, but cannot find the download page. Would you send me a direct URL?

        • Hi Marie,

          I already sent you the link, so at this point I am having a hard time trying to understand what you are still missing. Feel free to reply to my e-mail, and tell me what you have tried and where you are stuck.

  120. Hello! Tabs look really good, but this script not works on one computer. User uses Internet Explorer 9.0. What could be the cause of this problem?

  121. Pingback: SharePoint: Extending the DVWP � Part 30: Using EasyTabs with Filtered DVWPs to Make Data Manageable | test

  122. Pingback: SharePoint: Extending the DVWP � Part 30: Using EasyTabs with Filtered DVWPs to Make Data Manageable |

    • It used to work with ShrePoint Onlie / Office 365, but it’s not the case anymore now that Microsoft has rolled out the 2013 upgrade. Only the commercial version (SPELL Tabs) supports the upgrade.

Comments are closed.