How to Create Custom AJAX Tabs using jQuery. Download Source Code.

How to Create Custom AJAX Tabs using jQuery

Tags: Ajax, beginner's guide, jQuery, tabs, Tutorial

Today’s morning started a little hot here at ajaxBlender. We had some free time before starting the production meeting, and Mike (our lead developer guy) and Justin (newbie who joined us in November) started arguing about their respective abilities of creating cross-browser markup code (HTML, CSS, JS) by hand without mistakes, but also doing it really fast.The exchange went a little like this:

J: I am sure, there is no way you can create scripts from scratch fast. First thing is you integrate the 3rd party stuff. This is easy but when you have to create your custom code, it will require time for debugging, planning the structure, etc – even for small scripts.

M: Ha, do you want to try me? ;) You select a script and I do it. If I do it you owe me a pizza and make me coffee each morning for a week, otherwise I will for you.

J: Hm.. Sounds good. What about ajax tabs?

M: No problem :) How much time?

J: 10 minutes?

M: Great!

As you see, resolution to the matter involved a little fun and a wager (pizza).

Experience took its part – Justin lost. We recorded the process for proof ;) and now we’re posting it with a quick tutorial. You can watch Mike “cook” the code in the time-lapse YouTube video below, and you can download his AJAX tabs here.

That’s it ;) Click the Demo button to see it in action.

Here’s the code he created:

HTML

{code type=html}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Tabs Demo</title>
<link rel=”stylesheet” href=”./main.css” />
<script type=”text/javascript” src=”./jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”./main.js”></script>
</head>
<body>
<div id=”page”>
<ul id=”tabs”>
<li><a href=”./tabs/tab-1.html”>Tab 1</a></li>
<li><a href=”./tabs/tab-2.html”>Tab 2</a></li>
<li><a href=”./tabs/tab-3.html”>Tab 3</a></li>
</ul>
<div id=”tabs-container”>
Loading. Please Wait…
</div>
</div>
</body>
</html>
{/code}

CSS

{code type=css}
BODY {
margin: 20px;
padding: 20px;
font-family: “Lucida Grande”, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
#page {
margin: auto;
width: 1000px;
}
UL.mytabs {
position: relative;
z-index: 2;
}
UL.mytabs, UL.mytabs LI {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
float: left;
padding: 7px;
border: 1px solid #CCCCCC;
border-bottom: 1px solid #E0E0E0;
background: #F0F0F0;
text-decoration: none;
color: #333333;
height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
background: #FFFFFF;
}
UL.mytabs LI.current A {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
position: relative;
z-index: 1;
clear: both;
border: 1px solid #E0E0E0;
padding: 10px;
top: -1px;
}
{/code}

JavaScript

{code type=php}
var containerId = ‘#tabs-container’;
var tabsId = ‘#tabs’;

$(document).ready(function(){
// Preload tab on page load
if($(tabsId + ‘ LI.current A’).length > 0){
loadTab($(tabsId + ‘ LI.current A’));
}

$(tabsId + ‘ A’).click(function(){
if($(this).parent().hasClass(’current’)){ return false; }

$(tabsId + ‘ LI.current’).removeClass(’current’);
$(this).parent().addClass(’current’);

loadTab($(this));
return false;
});
});

function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass(’loading’);
$(containerId).fadeOut(’fast’);

$(containerId).load(tabObj.attr(’href’), function(){
$(containerId).removeClass(’loading’);
$(containerId).fadeIn(’fast’);
});
}
{/code}

View Demo

Leave a Comment

Andreas

November 14, 2009

GREAT!!! really fast. very good work. You are great man, go on!

Davide

December 4, 2009

thanks, that was very useful. You rock!

Brad

December 5, 2009

Can you target the tabs?

ajaxBlender.com

December 7, 2009

Thanks for your question, but I’m not sure I understand it fully. I assume you are not wanting to link them to a new target, as this would not technically require AJAX (or even be AJAX).

Are you asking if the content on the AJAX tabs can be crawled by the search engines? If so, then yes. The code for the AJAX tabs is SEO friendly, as it is built using unordered lists and with links to the tabs. All search engines will crawl and index the content of each tab. If this is not what you are asking, please clarify and we will try to help. Thanks!

Joshua Sortino

December 16, 2009

You guys should start “The National Speed Coding League” (NSCL) and advertise on ESPN (with all their channels, maybe they’ll cater one for the geeks.)

Alex.f

January 26, 2010

Hey, nice script there. I got a problem using it with Google Chrome though, the content within the tabs will look really weird, it works fine in other browser though…

http://www.sundsvallsolutions.se/index2.html

Darren – ajaxBlender

January 26, 2010

Alex.f, I see that the HTML files you’re trying to embed (i.e. http://www.sundsvallsolutions.se/foretag2.html) have <html><body> tags in them. This is not needed for the implementation of the tabs. You should leave <div id=”container1″>…</div> in the file only. This should fix it. Let us know, if not. Thanks!

Alex.f

January 26, 2010

That did the job, thank you very much for this excellent script and the help!

Brian

February 1, 2010

Very nice but if I replace the .html pages with ColdFusion pages (ie tab-1.html replaced with tab-1.cfm), the pages will not display. Must the linked pages be in .html format?

Darren – ajaxBlender

February 3, 2010

Brian, the extension type should not matter. It should work fine with .cfm. If you could provide us with the link to view the implementation, we will try to help fix the problem. Thanks!

Darren

February 5, 2010

Darren -

Thanks for the reply. Shortly after I posted the message, I found that it did work fine with other browsers such as FireFox and Chrome but not IE 7. I don’t have this on the web, just testing on a development server. If I can get it working on the dev server, it will then be moved to prod.

Thanks for the reply.

Raghib suleman

April 13, 2010

thanks, its very useful…!

Jonathan Morgan

April 28, 2010

Hi There,

Thanks for a great tutorial.
I’m also having difficulties with Chrome, though not for the same reason as Alex. Nothing is appearing within the content boxes. This isn’t an issue in either Safari or Firefox.

I’m sorry I don’t have a live version to link to, but here are some Pastie links:

HTML
http://pastie.org/939113

Javascript
http://pastie.org/private/gvdk6i26eb9m2rwd1w4ttq

CSS
http://pastie.org/private/fkckx9hh4znf79xzi1urvg

Tab1
http://pastie.org/private/rvwnspvttqitxhdpj7gxw

Tab2
http://pastie.org/private/ih1ucoa4bghqmfakbryzbg

Any help would be greatly received!

Thanks!

Jonathan Morgan

May 5, 2010

Actually, your demo isn’t functioning properly in Chrome.

Darren – ajaxBlender

May 25, 2010

Jonathan,

the script was actually developed and tested in Chrome, initially. please test it again. (we have been upgrading our servers and you could have possibly hit it at that time, but all should be good now.)…

thanks for the comments and help too!

Maarten

July 7, 2010

Hi Darren,

I got the script working but when I try to change the file extentions to php it doesn’t work any more. The file loads and then it loads another page which still is an html file… Any thoughts?

I would like to use my sql-database to display information on the different tabs.

Thanks!

Maarten

July 7, 2010

Hi Darren,

Got that fixed when I changed all the html documents to php in the tabs folder, but it won’t load any data from my sql-db into the tabs-documents?

Thanks again :)

maarten

July 7, 2010

Problem solved…

ajaxBlender.com

July 8, 2010

Maarten,

You move pretty fast. I didn’t even have time to look :). I’m glad you got the tabs working. Let us know if there are any other issues.

Thanks,

Alex

David Jon

October 23, 2010

Hi,
I’m having troubles using it with Wordpress. I created a file called mostviews.php to load in to my index.php template through the Ajax Tabs.
However whenever I check it in my Console, I get this warning message.

Failed to load resource: the server responded with a status of 404 (Not Found)

Eventhough the file exists, I can even view it in firebug.

If anyone can help me, please…im stuck!

http://www.davidjon.nl/wordpress

velviapersky

October 24, 2010

can i know where is class ‘loading’?

ajaxBlender.com

November 3, 2010

Hi, Velviapersky.
You’re right. We have missed it in the CSS. But if you would add a ‘loading’ class into your CSS and will assign a spinner to it for example it would display progress indicator properly.

ajaxBlender.com

November 3, 2010

Hi, David Jon!
We inspected your code and would like to confirm that your ‘mostviews.php’ script returns 404 error code (regardless its content get loaded or not), we can also see it in respose in Firebug but server still returns header with 404 code.
You may want to consider change loading direct script to a url of WordPress post, this should elimitate the issue or otherwise you need to check why your server returns 404 error code.
If you need a personal help please use contact form at our website to get in touch with one of our developers.

Gukkie

December 17, 2010

Hi where is the “loading” class at?

Cheers!

Gukkie

December 19, 2010

Hi, is it possible to have the URL displa the current page it is on?

Eg.www.example.com/page1.php

ajaxBlender.com

December 22, 2010

Hi Gukkie!
The CSS class ‘loading’ is used only when tab’s content is loading.

Unfortunatelly you won’t be able to load data from external url because they will load only a part of HTML code, without header and footer parts. In case you would like to use external URLs you would need to use IFRAME tag and load content into it.

Thomas

December 26, 2010

Hey guys,
I’m trying to use your script with wordpress on the home.php. But I can’t get it to work, because it seems to conflict with the wordpress built-in jquery version. I even don’t get to work the compatibility mode….

ajaxBlender.com

December 27, 2010

Hello Thomas!
At first you should check whether your website uses a different JS framework (for instance Prototype or Mootools) and if so, you may use jQuery.noConflict() method to avoid conflict between jQuery and the other framework (you may get more information about jQuery.noConflict here: http://api.jquery.com/jQuery.noConflict/).
If not, please check if your header.php contains link to jQuery framework before any other scripts go.

If the above solutions did not work please (http://www.ajaxblender.com/contact.html) – we will try to get more details and work out a solution for you.

neff

February 11, 2011

I’m wondering if Brad was asking if you could link directly to a tab and have it opened – i.e. click on link and tab 2 is activated and loaded?

Gavin Dotter

February 12, 2011

Took me time to read all the comments, but I really enjoyed the article.
It proved to be very helpful to me and I am sure to all the commenters
here! It’s always nice when you can not only be informed, but also
entertained!

sam

March 8, 2011

ahaan ! nice tabs -
What if u make it more robust by using history plugin for Url strcture ?Is it possible ?

thanks
sam

Jerry R. Reynolds

March 12, 2011

This is a great post but I need something more. If you visit http://www.alimoeinc.com/lab/ you can see the tabs are working fine but I cannot get the php to load. Suggestions? Would you guys be willing to create a tutorial that show how to call back php within the tabs created in this demo?

smith

March 21, 2011

not working in Chrome, how am I going to fix it?

Jonathan G

April 3, 2011

For some reason, I cannot get a javascript image circulator which is based in html code and has linking to style sheets to load in a tab. be great if you could help me out, thanks :)

Chris

May 18, 2011

I love, love this script but it doesn’t work on mobile Safari…any thoughts on this?

Thanks!

iatelier

June 18, 2011

Great script!! and quite a RARE solution of what should be logical integration: Tabs and AJAX

However, it DOES NOT work with foreign characters in files loaded with AJAX.
HTML files with charset=iso-8859-1 show correctly only in Chrome.
FF and Opera mobile show infamous black rhomb with ?
and MSIE 8 “eats” chars and leave rectangles instead of foreign chars.
See it here:
http://www.eu-seniorunion.info/1js/ajaxblender/index-1.htm

There should be some solution with $.ajax dataType option
but I can’t find it. Much obliged for help.

Ted

August 31, 2011

Guess I’m missing the AJAX. All I see is JQuery.

Of course you could have done it faster with one simple java script function…

Joey

April 20, 2012

It doesnt seem to work for me! im guessing it is because i am missing main.js ….

where can i get it?

Peter

June 6, 2012

Nice tutorial, and very cleanly done. Two comments:

(1) You’ve got a stray “>” character in the Javascript output there: it has “return >false;” instead of “return false;”.

(2) Is it possible to add the ability to link to a tab using ordinary links *within* the tab container? i.e. in the text body corresponding to Tab 1, there would be a standard text link that would take you to Tab 2?

James

July 25, 2012

Great code… Is there a way to make it sticky and remember the cookies on last clicked tab ?