Tabbed content is a great way to handle a lot of information on a page without loosing usability and it provides great user experience as well. Here’s a real easy way to create tabbed content with jQuery and CSS.

Let’s create tabbed content with jQuery and CSS

Tabbed Content with jQuery and CSS


Step 1: Include the jQuery library

<script src="//"></script>


I’ve used the latest version of Google hosted jQuery library, however you can always download the script and host it on your server.

 Step 2: Write some HTML code

<div class="container">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1">Tab One</li>
            <li class="tab-link" data-tab="tab-2">Tab Two</li>
            <li class="tab-link" data-tab="tab-3">Tab Three</li>
            <li class="tab-link" data-tab="tab-4">Tab Four</li>
        <div id="tab-1" class="tab-content current">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        <div id="tab-2" class="tab-content">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <div id="tab-3" class="tab-content">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        <div id="tab-4" class="tab-content">
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- container -->


In the above code I’ve created an unordered list which will act as tabs and I’ve used a custom attribute named data-tab and set its value to tab-1, tab-2 and so forth. We will use the data-tab attribute in our jQuery script to toggle the “current” class to hide and display our tabs.

Below the unordered list, there are a few DIV elements with ID attribute same as the data-tab attribute we used in the unordered list. This will do all the magic. Before adding the magic script, lets write some CSS to stylise our HTML Unordered list and content panels.

I’ve added “current” class to the first elements and we will play with the current class to stylise the active tabs and toggle the data content div element.

Step 3: Write some CSS to style the HTML

	margin-top: 100px;
	font-family: 'Trebuchet MS', serif;
	line-height: 1.6
	width: 800px;
	margin: 0 auto;

	margin: 0px;
	padding: 0px;
	list-style: none;
ul.tabs li{
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;

ul.tabs li.current{
	background: #ededed;
	color: #222;

	display: none;
	background: #ededed;
	padding: 15px;

	display: inherit;

I’ve used display:none for the .tab-content and display:inherit for the “current” tab. This will hide all DIV elements and show the tab with current class only. We will play with the current class to get our tabbed content work with a small magical jQuery code.

You can always change the CSS to have the look and feel similar to your website, use some image backgrounds to make it nice and smooth.

Step 4: Write the magic jQuery code

Now here’s the magic jQuery code which will actually create the tabbed content work.

	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');
		$('ul.tabs li').removeClass('current');

When the DOM is ready, if a user clicks on any list element of ul.tabs it will grab the data-tab attribute and assign the same to tab_id variable. Then, we will remove the current class from all list elements and our elements with jQuery removeClass attribute. Then we will add the “current” class to the clicked list element and DIV tab with the grabbed data-tab ID.

That’s it, now we have working  tabbed content with jQuery and CSS. Try it, share it and let me know of your thoughts in the comments. If you need to add any additional functionality, feel free to ask in the comments.

Live Demo


Mohit Aneja
I am an experienced designer and developer with a solid knowledge & experience of current web and mobile technology. I am a problem solver at heart and strive to develop the most effective solutions at the highest of standards and current technology.

  • Davinder Singh Kainth

    Explained in very neat manner, specially for starters. Will try out soon!

  • J Burns

    Could this work for nested tabs?

    • I haven’t tried yet, however, I believe if we name the class different it should. However, there may be some issues with the height.
      Will try that and post my findings on the same.

  • Jeff

    The jQuery part is confusing. Where do you actually place that code? How do you call it on an actual wordpress post? These are all questions that beginners will have trouble with, unless this is supposed to be an advanced tutorial. I’d recommend showing how to actually create the code, the functions and calling it on the actual post so novice coders can use these tabs.

    • Sure, will keep that in mind and make the edits for existing tutorials. Thank you for the feedback.

  • Wendy

    Hi Mohit ~
    Will this work well on mobile devices? Also, any problems with including links, images or embedded video in the tabs?

    • Hi Wendy, For this to work on mobile devices, we need to use media queries. And, You can add any content in the tabs.

  • Neil

    Hi there,

    Great tutorial. How would I centralise the tabs above the content?



  • Hassan Al Mehdi

    Sir, where do you actually need to place the jQuery code in Blogger Platform. Please Help

  • Terry

    Great tutorial. Nice and easy to implement for beginners.

  • Noviar

    So… what do we actually DO with the JQuery code? Where does it go? What do we do with it? This isn’t explained!

  • Aman

    i want that the tab content should get hidden after the cursor is our if the tab or tab-content div. Can you please help me with that.

    Thanks in Advance !!!

  • Alexandar

    Great tutorial. Simple and effective.
    However, there’s a limitation if you want to use more than one tabbed contents on the same page.
    Here’s my modified version for mentioned multiple implementation:

    Let me know what you think.

  • Sadanand

    Thank you very mush yar. Very simple and very useful.

  • Deni

    Great tutorial. I have just one question. How to add fade effect to the tab content?
    Thank you in advance.
    Best regards,

    • Hi, You can use jQuery’s .fadeIn('slow') or .fadeOut('slow') functions to get this done.



  • Guilherme

    There’s actually a jquery function called TABS. In your example, you could replace all your jquery code with this:

    $(function() {
    $( “#container” ).tabs();

    and your menu html you should set this way: Tab 1

    that’s all. The “current” stuff and the other classes you won’t need.

    read more about it here:

    • Thank you Guliherme for sharing this technique.
      NOTE: We need to call jQuery UI library to make this code work, this function is not included in jQuery itself.

  • Scott

    Has anyone had any difficulty getting this to work in Internet Explorer browsers 8 and below?

    • Hello Scott,

      You may need to apply specific hacks for older versions of IE.

      I’d suggest notify users to upgrade their browsers to the latest version to use current technology features instead of wasting time to make sites compatible with older versions. But that just me, other may have different opinion about this this.

  • Max

    Hi Mohit,

    i have a question: Is it possible to create a button like “Switch to the next tab”. Let me give an example: the content of tab-1 is visible. After clicking “Switch to the next tab”, tab-2 appears. Additionaly. is it possible to indicate, which tab is currenty active (like a string “Tab 2 is active”)

    I would be really happy about this extension 🙂

    Thanks your for response in advance!


    • Hello Max,

      Yes this is possible via jQuery on button click event. You can assign data attribute to the buttons to achieve the same.

      • Michael

        About the “switch to next/prev tab”-button – can you please explain it? I need it too and have no idea what you mean with your answer to Max. Thanks!

  • Jan

    Hi Mohit,

    Great script. Thanks.
    A question. Is it possible to open a tab with a link in the text? Example: Tab1 is opened. In the text there is something like ‘Please read more in tab2’. And tab2 is a link that opens tab2?



  • Peter

    Exactly what I needed. I tried a few heavy and well documented libraries, but this is one I can tweak.
    I needed to bypass the actual list items so that you are forced to use “previous” and “next” buttons inside the tabs only.

  • Dawn

    Is there a way to have the tabbed content be hidden on first load until the user clicks on the tab?

    • Yes, you can do the same by removing the current class on first element. Once you remove the current class, it will only show the tab when user clicks on it.

  • Stay up-to-date!
    Join our mailing list to receive product updates & announcements. Every month we give away FREE Licenses to our lucky subscribers.

    No Spam Ever!

Stay up-to-date!

Get notified of product updates, new products and freebies.