Simple tabs using jQuery

Simple tabs using jQuery

Simple tabs are actually a single content area with multiple panels, each associated with a header in a list. In this article we are going to create tabbed content with very simple tabs using jQuery. The last output of our tutorial will be like below.

You can see the working example here or download the source.

Follow these steps to create Simple tabs using jQuery:

Step 1: HTML Markup

Write the following html code inside body tag of your page:

We have included a number of anchor links inside the div block (class = "tabs") to work as clickable tabs. Each simple tab has an unique href attribute. These are preceded by special character ‘#’ because of internal linking.

The  actual content are placed inside div with class name tabcontainer, each content section within a div that has the id same as anchor href attribute. When we click any link, it jump down to the very section if you check your page until here. You should replace TAB Content with your real content.

Step 2: Styling

We have put the following minimal CSS code into style.css file and linked into head section of our page for some basic formatting and styling of tags:

Step 3: Add jQuery

All JavaScript code requires jQuery. So include jQuery in our page if you don’t have already. We have added jquery-1.11.1.min.js in head section of our page and it’s included in download.

Step 4: Call the Function

The last part remaining to do is calling the JavaScript function. So add the following code just after the jQuery file you included in step 3.

The script contains comments explaining which jQuery actions are being performed.

You can see the working example here or download the source.

Conclusion

So here we have a nice and simple tabs using jQuery and CSS. If you have any questions, comments, or suggestions, please feel free to ask!

You Might Interested In