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.

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…