WP-Mix

Here’s an clean, simple way to add a tabbed sidebar menu using jQuery. You can see an example in the Introspection WP Theme.

Step 1: HTML

Add the following HTML to the sidebar of your web page(s):

<ul class="tabs">
	<li class="active"><a href="#tab1">Recent</a></li>
	<li><a href="#tab2">Popular</a></li>
	<li><a href="#tab3">Random</a></li>
</ul>
<div class="tab_container">
	<div id="tab1" class="tab_content">
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Proin feugiat lobortis lorem</li>
			<li> Curabitur quis dui sapien</li>
		</ul>
	</div>
	<div id="tab2" class="tab_content" style="display:none;">
		<ul>
			<li>Suspendisse potenti</li>
			<li>Curabitur sed felis vitae</li>
			<li>Mauris feugiat varius</li>
		</ul>
	</div>
	<div id="tab3" class="tab_content" style="display:none;">
		<ul>
			<li>Pellentesque in libero</li>
			<li>Vestibulum luctus porttitor</li>
			<li>Vestibulum vel arcu ipsum</li>
		</ul>
	</div>
</div>

Of course, you’ll want to replace the “lorem-ipsum” content with something useful.

Step 2: CSS

Next step, add the following CSS to your stylesheet:

/* Tabbed sidebar menu @ https://wp-mix.com/tabbed-sidebar-menu-jquery/ */

ul.tabs { position: relative; z-index: 1000; float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #777; }
ul.tabs li {
	position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #2A2A2A;
	border-bottom: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777;
	}
ul.tabs li a { display: block; padding: 0 10px; color: #999; outline: none; text-decoration: none; }
html ul.tabs li.active, 
html ul.tabs li.active a:hover { background-color: #3B3B3B; border-bottom: 1px solid #3B3B3B; }
html ul.tabs li.active a:link  { color: #ccc; }
.tab_container {
	position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #3B3B3B; border: 1px solid #777;
	}
.tab_content { padding: 7px 11px 11px 11px; line-height: 1.5; }
.tab_content ul { margin: 0; padding: 0; list-style: none; }
.tab_content li { margin: 3px 0; }

Note that this is the CSS used to style the menu as displayed in the Introspection Theme. Customize as needed to fit your design.

Step 3: jQuery

For the final step, we add the requisite jQuery to make it all happen:

<script type="text/javascript">
	// Tabbed sidebar menu @ https://wp-mix.com/tabbed-sidebar-menu-jquery/
	$(document).ready(function() {
		$(".tab_content").hide();
		$("ul.tabs li:first").addClass("active").show();
		$(".tab_content:first").show();
		$("ul.tabs li").click(function() {
			$("ul.tabs li").removeClass("active");
			$(this).addClass("active");
			$(".tab_content").hide();
			var activeTab = $(this).find("a").attr("href");
			//$(activeTab).fadeIn();
			if ($.browser.msie) {$(activeTab).show();}
			else {$(activeTab).fadeIn();}
			return false;
		});
	});
</script>

Unlike the first two steps, no editing is required for the jQuery — unless you want to customize with your own skillz ;)

Update

The previous technique only works with jQuery version less than 1.9. Here is a version that works with all versions of jQuery, up to version 3 (and up):

<script>
	// Tabbed sidebar menu @ https://wp-mix.com/tabbed-sidebar-menu-jquery/
	jQuery(document).ready(function($) {
		$('.tab_content').hide();
		$('ul.tabs li:first').addClass('active').show();
		$('.tab_content:first').show();
		$('ul.tabs li').click(function() {
			$('ul.tabs li').removeClass('active');
			$(this).addClass('active');
			$('.tab_content').hide();
			var activeTab = $(this).find('a').attr('href');
			$(activeTab).fadeIn();
			return false;
		});
	});
</script>

I use this snippet in the latest version of my test/dev theme, Introspection. “Two toots to the wind..”