7 Tools to Add Tabs To Your Website Content

If you may not have noticed the current design and Techie Buzz’s earlier designs, we have been making heavy use of tabs to compact content. It benefits both users as well as the site to compact content and present it in a nicer way.

Some time back we had also given a detailed tutorial on how to add tabs to your website, today in this post we will introduce you to 7 different tools that will allow you to add tabs to your own website.

JavaScript Tabifier

javascript-tabifier-screenshot

JavaScript Tabifier which uses CSS and JavaScript to create tabs to group content together. If you want to add tabs for your site you can download the script from the website. I prefer the light version of Tabifier which is around 5Kbs in size and does not cost much on site load time.

Advanced Tabs

advanced-tabs-screenshot

Advanced Tabs is advanced tab creator which features tab scrolling, adding tabs programmatically and a context menu plugin.

MooTabs

mootabs-screenshot

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.

YETTI

yetti-thumbnail

YETTI use lightweight , object oriented code to create tabs for your content, the script in itself is not dependant on any other library or framework.

TabView

tab-view-screenshot

TabView is a script that will allow you to add tabs for your content using simple JavaScript code. The tabs also have a close button allowing the user to close any particular tab.

Control Tabs

control-tabs-screenshot

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly.

DOMtab

domtab-screenshot

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

Summarizing

Adding tags to your website not only compacts content but also makes it easier for your users to browse them.

Having tabs also definitely helps you to use less space to show more content.

What tab tools are you using for your websites? What are your favorites? Don’t hesitate to tell me I am more than eager to know about them.

  • Share

Related Topics Similar to This Article: »

Recent Activity: »

Read More On: ,

Comment Using Facebook

9 Responses to this Article | Share your Opinions/Comments

We moderate comments to prevent spam. Moderation is done within few hours. Please try and stay on topic and refrain from using abusive language. If you think there is a problem with this post, please email the post author or send us an email at tips@techie-buzz.com with the URL and the problem you see and we will rectify it as soon as we can.

  1. Moldova on May 22nd, 2008 at 8:59 am #

    These tabs are very good if your page space is limited.

  2. Eugene on May 22nd, 2008 at 11:30 am #

    Control Tabs – nice one, i’m using it on some web-pages.

  3. Haris on May 22nd, 2008 at 3:54 pm #

    Very nice list. I might use one of these for my new blog design :)

    • Keith Dsouza on May 22nd, 2008 at 11:28 pm #

      Glad you liked it Haris :) I used tabifier earlier and it was pretty good.

  4. Nirmal on May 23rd, 2008 at 1:03 am #

    This is really useful stuff Keith, I will be trying these out.

  5. abhishek on May 23rd, 2008 at 8:10 am #

    quite usefull…i have never tried them but looks like some of them are worth a try.

  6. Syahid A. on May 23rd, 2008 at 11:05 pm #

    Dugg-ed! Fantastic list of tabs Keith. Keep the good post rolling!

  7. Joel on May 24th, 2008 at 11:20 am #

    In my next redesign, I have been looking for some tab designs….This should be helpful…

  8. pri2sh on January 15th, 2010 at 6:49 am #

    thanks for this list,
    I tried all the except control.tabs,domtabs & advance tabs and found JavaScript tabifier to be easiest to use and light. + well documented examples in site ,