Click here to Skip to main content
15,867,568 members
Articles / Web Development / XHTML

Simple JQuery Tabs Template

Rate me:
Please Sign up or sign in to vote.
4.50/5 (5 votes)
5 Aug 2009CPOL3 min read 66.9K   1.3K   21   5
A simple jquery tab as template that addresses few issues with JavaScript tabs
muhsin_meydan_tabs_template.gif

Introduction

I was wondering how to make a simple tab and I found many different solutions for that. I tried a few of them, but I noticed a few issues with the ones I tried such as: 

  • When the page loads, sometimes you see all the tabs first in a blink and then they get hidden (which I don't like to see on a website).
  • When you click on two tabs one after the other quickly, you see both the tab contents on the page next to each other, which is weird (this usually happens when tabs are animated). 
  • When you want to add another tab, you have to go in the script and link the tab to the content. 
  • All the implementations have a different approach (I want something simple and reusable without modifying its script).

My JQuery Tabs Template addresses all the issues listed above. My development was in ASP.NET C#, but I have used simple HTML, CSS and a JQuery file for this example.

Background

It would be worth looking at the JQuery official website for other templates and learning JQuery. However for this article, all you have to know is understand a bit of HTML. If you know a bit of CSS, that is good and you can change the coloring of the content. If you know JQuery, that is even better. That is it :).

Using the Code

Using the code is easy. In the sample I give you, I already use 5 tabs. You can change it as you like. So you can use any HTML editor of your choice for modifying the index.htm which holds the tabs and contents for each.

In the index.html, I have links to:

  • latest jquery file
  • tabs.js that contains JQuery script that displays the content based on which tab is clicked 
  • tabs.Css file which does the main template layout.

Adding a New Tab

All the tab links are in the list format and for each list element, no anchors or links to anywhere are needed. This is the sample link: all you need is to add a new link in the list like this and change the step text.

Step 1

This is how it looks:

Adding Content for the New Tab

In order to display content for the link we created, we need to have a tab content so our script will display it when the step1 link is clicked.
All we have to do is copy and paste the content tag in the HTML:

HTML
<div class="tabcontent"> I am going to be displayed when step 1 is clicked </div> 

Note: The important thing here is the order of the tab contents and tab links. All the tabs are mapped to its content by the order of the "tabcontent"s. So first link "Step1" is mapped to first "div class='tabcontent' element in the "'div class="tabscontent_container'". Maintain the order when you add new tabs and contents. You don't have to add/modify any script.

Points of Interest

  • CSS contains images so all the images in the tabs can be changed. The current staus is red forward image and other images are gray bars. Change them in CSS into whatever you like.
  • You can move the navigation tabs anywhere on the page right, left or at the bottom of the tabscontent. All you have to do is copy the "div id='tabs_nav_wrapper'" around.
  • If you want to change the way animation moves such as fadeIn/out or slideDown/Up, you need to modify a line of the script. The line is in the DisplayTabContent() function. Change the line ending ".slideDown('slow');" to the animation type you want, e.g., ".slideUp();". This is JQuery animation. If you want to learn more about the types, go to the JQuery official site.

Folks, I need your comments so I can improve this. If you find this useful, please email the link to your friends.

History

This is the first version of the simple JQuery Tabs Template.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United Kingdom United Kingdom
I am an Asp.Net C# developer. I specialize in designing and implementing n-tier web applications and mobile wap applications.

Comments and Discussions

 
Generalexcellent work mate ... Pin
mahgoub13-Oct-09 4:01
mahgoub13-Oct-09 4:01 
QuestionjQuery UI tabs Pin
SmirkinGherkin5-Aug-09 22:12
SmirkinGherkin5-Aug-09 22:12 
AnswerRe: jQuery UI tabs Pin
muhsin meydan6-Aug-09 1:00
muhsin meydan6-Aug-09 1:00 
GeneralCode link is broken Pin
Tony Bermudez5-Aug-09 8:54
Tony Bermudez5-Aug-09 8:54 
GeneralRe: Code link is broken Pin
muhsin meydan5-Aug-09 9:54
muhsin meydan5-Aug-09 9:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.