Christophe’s Easy Tabs at Path to SharePoint

That Christophe guy over at Path to SharePoint never rests!  I just spotted his post on his new Easy Tabs Web Part.  I haven’t dug under the covers on it yet, but Christophe’s stuff is always nice.

The Easy Tabs Web Part is a Content Editor Web Part with some JavaScript. When added to a Web Part zone, the script identifies all the Web Parts that are present in the zone. For each visible Web Part it creates a tab named after the Web Part title.

The look and feel of the tabs match the theme of the site.


UPDATE 2009-05-26: I did some fiddling with this today, and it is really slick, and so elegant in its simplicity!


  1. Hi Christophe,

    I tried using the EasyTabs_Bis, but not sure how to use it. Can you give an example or demonstrate how to use it? I used it and it didn’t add a second row of tabs.

    Thank you.

  2. Hey Marc,

    It is working fine. Thanks a lot. But I would like to change the tabs style as per my requirement. How can I apply the CSS for tabs.

    • Well, that’s sort of an exercise left to the reader. ;+) Use a DOM inspector like the IE8 Developer Tools to look at the CSS classes and adjust accordingly. In one instance where I’ve used the Easy Tabs, my DOM looks like this:

      <TD id=EasyTabs class=ms-siteactionsmenu>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ1 class=ms-tabselected>Case Studies</SPAN>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ4 class=ms-tabinactive>Public-Facing Web Sites</SPAN>
        <SPAN style="HEIGHT: 18px" id=tabWebPartWPQ2 class=ms-tabinactive>Client Endorsements</SPAN>



Have a thought or opinion?