May 6th, 2009
Tabify – Tabbed content with ease (jQuery plugin)
This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.
How to use Tabify
It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.
<ul id="menu"> <li class="active"><a href="#contentHome">Home</a></li> <li><a href="#contentGuestbook">Guestbook</a></li> <li><a href="#contentLinks">Links</a></li> </ul> <div id="contentHome">Content for Home</div> <div id="contentGuestbook">My guestbook</div> <div id="contentLinks">Links</div>
When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.
$('ul').tabify();
| Version | Changes |
|---|---|
| 1.4 | Fixed an issue where a malformed hash would make Tabify crash. |
| 1.3 | Fixed an issue causing the page to jump when you clicked on the tabs |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
Hiya, i am wanting to use your ultra small tabify in packer. Here is a patch to do just that (you need some semicolons): http://pastie.org/335559
Thanks Andrew! I have a look at it as soon as I can reach pastie.org – some server trouble right now. I did a slight update of tabify yesterday. Added functionality so you can link directly to a tab by using the hash and support for the browsers back and forward button. Have a look at it here. http://code.google.com/p/jquery-tabify/source/browse/#svn/trunk
Testing..
Good trick, but i cant find how to use onMouse over effect in it. Can anybody help me?
@Stan:
Take a look row 27-29 in this modified version of Tabify: http://pastebin.com/d6340f4d5
Nice and tiny plugin. Its very close to what I need, but not quite. I’m starting to hack it now, but am hoping you can give me some suggestions.
1. Main problem is I don’t want to add clicks to the browser history. How can I keep that from happening?
2. The browser keeps scrolling to the top of the content area when I click a tab and I don’t want it to scroll (doing so hides my page header and navigation and would just seem weird to a visitor).
3. My “tabs” aren’t really visual tabs. They are three images on the page in an unordered list. Clicking them changes a content area to the right of them. I need to have image swapping for unselected, selected, and rollover states. Is this possible?
4. For some reason, the content area is blank on page load until I click onto a tab. How do I set a default to show on page load?
Example URL:
http://theseniorlist.com/db
The three buttons (browse, review, add) on the page will change the contents of the area with the map. When a button is rolled over, it should highlight. When selected, it should also look different.
Can you help suggest how to do these things with your plugin?
Whichever tab you want to be the default active add the class active to the li.
ie Home
@Tauren: Solved via email. Tauren used version 1.1 instead which does not have the hash feature.
http://code.google.com/p/jquery-tabify/downloads/list?can=1
How / why is this different to the jQuery tabs?
@florin: Jquery UI Tabs has a lot more functionality and weight. UI core + tabs is about 20kb packed, tabify is about 600 bytes.
’1. Main problem is I don’t want to add clicks to the browser history. How can I keep that from happening?’ – yea, same qualm here.
If you can get back to me before tomorrow I’ll hopefully be able to retain your sterling work in this site I’m working on.
Thanks Jan.
L
@Lewis Liatnzios: Tauren solved it by using version 1.1 instead, it does not have the hash feature.
There one difference though, the html syntax.
tab
You can get version 1.1 from here http://code.google.com/p/jquery-tabify/downloads/list?can=1
/Jan
I’m having problems in IE7 with this plugin. clicking on a tab makes my pages jump to the location where the tag is of the corresponding div. just like as JS is disabled, but for the rest it works normal.
Like the last guy said, there seems to be a bug when using tabify in I.E.7. Anchor event is still beign called after tabs have been created. Causing the page to “jump” to the div when the link is clicked
@ Bengie & guy: I will fix it in a couple of days.
Hi Jan, great plugin! Like Bengie and guy said, this is a problem for me, too. Do you have a time line for fixing this? Your help is very much appreciated, great work!
JD Graffam: Bengie & guys problem was fixed in version 1.3. Have you downloaded the latest version (1.3)?
Hi Jan,
I’m hoping to use your plugin but I’m having difficulty setting it up so the javascript presents the first div on page load. As it stands, on page load my menu is available but no content is visible until I select a menu item. I noticed someone asked about this previously in the comments, though the answer was not made public.
Any help is appreciated. Thanks.
@Geoff:
Notice the class name on line 2 in the code example above. The classname “active” will, in the example above, make contentHome visible at page load.
Nice work Jan.
Is there any way that I can link directly to child content /inside/ a specific tab’s div? eg. href=”#halfwaydowntab”
@Rick
Sorry, that is not possible at the moment.
This is very useful. Is there any way to use images in the tabs for default, rollover and active states?
@joe:
Sure, you can put whatever you want inside the a-elements and control them via css a:hover for example.
I am having an issue with this plugin adding -tab to all my links. I have checked the code over a million times, and I can’t find out why this is happening! Any suggestions?
The page I am working on is in dev here: http://vintom.com/gfc
I would appreciate any help!
Thanks!
Hi,
Does the tabify plugin rely on setting the hash to work or can I turn that off? (I’m using the hash for other purposes and don’t want it overwritten)
Thank you for a great plugin by the way!
Unfortunately it does rely on the hash.
ok, thx anyway. built my own litle thingy – simpler though ;)
Is there anyway to get the tab content to fadeIn? I tried to change show to fadeIn and it began to flicker erroneously.
Hi Jan,
I’m having the same problem as Vin (http://www.unwrongest.com/projects/tabify/comment-page-1/#comment-435).
If you use a [ul] list with links within one of the tabs. “-tab” gets appended to each link. Is there a way to remove the “-tab” suffix in cases like this?
Okay… fixed the problem!
Was a jQuery selector error on my part! :p
Hi Jan,
I have a feature request.
Would it be possible to have tabs within a tab?
Your accordion plugin handles nesting… I’m just wondering if you would consider using nesting in Tabify as well.
Thanks for reading!
Hi Jan,
I can’t get this script to work. Probably because my CMS requires the base tag (set to the site root).
Because of this, when clicking a tab, it adds the anchor to the root in stead of the current page path (www.test.com/#tab, in stead of http://www.test.com/path/to/page/#tab).
Because of this, it also doesn’t find the tab when trying to open the correct tab on page load, when a hash is added to the url.
Hope you can fix this.
The tabs plugin from jQuery Tools does do this correctly, this what I like about your tab, is that it finds the corresponding panels by ID (so they don’t have to be in the corresponding order to the tabs).
Thanks
When I add an id to each list item (tab), it doesn’t work. I need to do this as each tab will have a different style.
What do I need to do in the javascript file to get it to recognise elements that have ids?????
Jan, is it necessarily to use “-tab” suffix шт the URL?
Cause in my case i need only my anchor links, without “-tab”, but it does not work, as it should.
Maybe you have some solution on this case?
Thank you.
There is a way not to display the tab content on IE during the loading of a page ?
In case anyone else wants to mix tabs with external links I altered the source to do just that and have posted it here (http://pastie.org/733260). just add the class ‘tabign’ to anything you don’t want tabified. Thanks for coding all this great stuff.
I am also having problems with the -tab added to the end.
I want one of the tabs to be a direct link to a page while the other 3 show content divs.
I was able to get around this for now by changing the -tab in the js file to ?tab… now it still remembers the tab and the page it goes to loads, but I wish there was a better way.
Nice plug-in. But I noticed on the initial load, all the tabbed content “flashes” into view. I’m fairly sure this can be solved by adding a display:none; to your content class.
It would be nice to renew zip package because in demo is newer version which not opening menu on load :)
I needed to add the class active if no one was selected so I did this:
if(location.hash)
handleHash();
else
//I added this below:
$(this).children(‘li’).first().addClass(‘active’);
cheers
ingvi