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:
<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.
