How to add jQuery Tabs to Blogger to create multi-tabbed content

Today’s tutorial will show you how to create tabs on your Blogger blog. Tabs help you organise different content sections in a single container, allowing users to switch between items easily.

Tabbed Content is great way of displaying a lot of content in a smaller space by separating the content into different panels. There are so many ways you can style tabs, but the general idea is the same – you click a tab and the content displays without the page reloading.

How to creating multi-tabbed content on Blogger

Multi-Tabbed Content Demo

The CSS
I’ve left the styling very basic, including a light grey background and fade effect as you move between tabs. You can add to this as you wish so that they styling matches your blog design and branding.

Copy and paste the following right above ]]></b:skin> in Theme > Edit HTML. If you’re having trouble finding ]]></b:skin>, check out this post for help.

/*----- XOMISSE Multi-Tabbed Content -----*/
ul.xo-tab-links {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

ul.xo-tab-links li {
	background: none;
	color: #222;
	display: inline-block;
	padding: 10px 20px;
	cursor: pointer;
	transition:all linear 0.15s;
}

ul.xo-tab-links li.current {
	background: #f8f8f8;
	color: #333;
}

.xo-tab-content {
	display: none;
	background: #f8f8f8;
	padding: 20px;
}

.xo-tab-content.current {
	display: inherit;
}

The jQuery
Next we’ll add the functionality. Add the follow jQuery right above </head> in Theme > Edit HTML. If you already call a jQuery library (jquery.min.js or jquery.js) in your theme already, you can skip the entire first line.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($) {
  $(document).ready(function(){
      $(&#39;ul.xo-tab-links li&#39;).click(function(){
          var tab_id = $(this).attr(&#39;data-tab&#39;);

          // Make the old tab inactive.
          $(&#39;ul.xo-tab-links li&#39;).removeClass(&#39;current&#39;);
          $(&#39;.xo-tab-content&#39;).removeClass(&#39;current&#39;);
          
          // Make the clicked tab active.
          $(this).addClass(&#39;current&#39;);
          $(&quot;#&quot;+tab_id).addClass(&#39;current&#39;);
      })
  })
    })(jQuery);
</script>

THE HTML
Now it’s time to add your content. Go to the post, page or HTML gadget you want to add the multi-tabbed feature to. Make sure you’re in HTML mode (and not compose or rich text mode). Copy and paste the following…

<div class="xo-tabs">

   <ul class="xo-tab-links">
      <li class="current" data-tab="tab1">TAB ONE LABEL</li>
      <li data-tab="tab2">TAB TWO LABEL</li>
      <li data-tab="tab3">TAB THREE LABEL</li>
      <li data-tab="tab4">TAB FOUR LABEL</li>
   </ul>

   <div id="tab1" class="xo-tab-content current">
	YOUR CONTENT HERE
   </div>
   <div id="tab2" class="xo-tab-content">
	YOUR CONTENT HERE
   </div>
   <div id="tab3" class="xo-tab-content">
	YOUR CONTENT HERE
   </div>
   <div id="tab4" class="xo-tab-content">
	YOUR CONTENT HERE
   </div>

</div><!-- xo-tabs -->

Change the TAB LABEL to the name of each section and add your content to the YOUR CONTENT section. Save your changes.

The Result
You should now see each of the content sections under a tabbed navigation like in the demo.

Multi-Tabbed Content Demo

By customising the CSS further, we can achieve something like the following…

Tab 1

Hello there!

Tab 2

How are you?

Post last updated:

7 responses to “How to add jQuery Tabs to Blogger to create multi-tabbed content”

  1. OMG this is so great! I added it to my about page and I love it! Thank you!!

  2. Jack

    How do I refresh tab content on click ??

  3. hey that was great, but if i embed video (youtube) to this tab, its not responsive. can you help me?

    1. Check out this tutorial for making embedded videos responsive 🙂

  4. lokayes

    cool, thanks

  5. This is what i want… Thank you so much…

  6. hadi

    thank you mate……save my time… 😀

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.