Online shop tabbed content box with jQuery

This is a tutorial on how to make a tabbed content box, like those you can frequently see on the product pages of online shops. We will be using HTML5, CSS3 and jQuery.

The HTML

Step #1: the tabbed navigation

We must first make a list of links, that we will later style to look like tabs:

Step #2: the tabbed content

We have 3 pieces of content, one for each tab.

Step #3: common container for the navigation and content in a div

We’ll wrap the navigation and content in a div with a class of tabbed. The result:

And we are done with the HTML

The CSS

Step #4: basic formatting of the list of links created at step #1

Eliminate the bullets and set margin and padding to 0; then set the list’s height. Add display: flex.

Step #5: style the list items

We want the tabbs to divide all the available space equally between them. For that we need:

Step #6: style the links themselves

Step #7: add the 3D look

for this we need a CSS3 gradient; for the gradient we will use the gradient generator at colorzilla.com. Pick the gradient marked with a red border in the image below. Copy the generated code an paste it after background: #ffffff;.

gradient

Now we have

Step #8: style the active tab style

Step #9: style the content container

Step #10: style the content

We are done with the CSS. The result so far:
tabbed_content_box_02

jQuery and some vanilla JavaScript

Step #11: create a function called TabbedNav and call it:

Inside those curly brackets, we will replace “//Code here” with the actual code. Let’s do it, in small steps

Step #12: hide all the content, then show the first piece of content (out of 3):

Step #13: Add class “active” to first tab:

The code above makes the first tab active on page load.

Step #14: Correlate the tabs with the content:

And we are done. You can see a live demo HERE.