An easy way to create Tabbed Content with jQuery & CSS

Tags:

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

 

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

 

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

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.

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 DIV.tab-content 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

 

29 thoughts on “An easy way to create Tabbed Content with jQuery & CSS”

  1. Davinder Singh Kainth says:

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

  2. J Burns says:

    Could this work for nested tabs?

    1. Mohit Aneja says:

      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.

  3. Jeff says:

    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.

    1. Mohit Aneja says:

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

  4. Wendy says:

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

    1. Mohit Aneja says:

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

  5. Neil says:

    Hi there,

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

    Thanks,

    Neil

  6. Hassan Al Mehdi says:

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

  7. Terry says:

    Great tutorial. Nice and easy to implement for beginners.

  8. Noviar says:

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

  9. Aman says:

    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 !!!

  10. Alexandar says:

    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:
    http://codepen.io/Neurodrive/pen/capjB

    Let me know what you think.

  11. Sadanand says:

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

  12. Deni says:

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

    1. Mohit says:

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

  13. THE GUY says:

    People keep asking where to put the jquery, YOU PUT IT BETWEEN A SET OF SCRIPT TAGS IN THE SAME DOCUMENT YOUR PUTTING YOUR HTML CODE. YOU CAN COMBINE ALL THREE SETS OF CODE IN ONE DOCUMENT TOO IF YOU DON’T SEPARATE YOUR CSS AND JQUERY FROM YOUR HTML/PHP/ASP .

  14. Guilherme says:

    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: https://jqueryui.com/tabs/

    1. Mohit says:

      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.

  15. Scott says:

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

    1. Mohit says:

      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.

  16. Max says:

    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!

    Max

    1. Mohit says:

      Hello Max,

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

      1. Michael says:

        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!

  17. Jan says:

    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?

    Regards,

    Jan

    1. Mohit says:

      Hi Jan,

      This can be achieved via jQuery :contains.
      Check this link for more: https://api.jquery.com/contains-selector/

  18. Peter says:

    Perfect!
    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.
    Nice!
    P

  19. Dawn says:

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

    1. Mohit says:

      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.

Leave a Comment

Your email address will not be published.*

*