Make a tabbed content box with jQuery

In this tutorial I will teach you, step by step, how to make a tabbed content box using HTML5, CSS3 and jQuery (with a bit of vanilla JavaScript). There is a link to my end result at the and (hosted on jsfiddle.net), but don’t sneak a peek, follow the tutorial and enjoy it. Comment bellow.

Step #1: create an empty HTML5 document

Step #2: In the head section, attach the style sheet, the jQuery library and an external .js file for our custom Java Script

Step #3 – adding the HTML: the tabs

In a div with tge class of content, we will add a list of links:

Step #4 – adding the HTML: the tabbed content

We shall now add the articles, just bellow the list we made at step 4. There will be 3 articles – one for each tab.

Step #5: Style the page

You can style your tabbed content as you wish. The only CSS that counts for achieving the goal of the tutorial is:

My CSS:

Step #6: Scripting the tabs

In the tabbed.js file, first of all, make sure you execute the function that handles the tabs, after the document is loaded:

Step #7: create the function TabbedNav() and call it:

Step #8: write the function’s code

The comments serve as an explanation, so here is the entire code:

And we are done. You can see my end result here.