Once I needed to make tabs on the webpage. As it's a rather routine problem, I didn't want to reinvent the wheel, so I just googled a little bit to see how people solve it. All the solutions I found looked rather run of the mill, something like that:

<div class="tabs">
	<ul class="nav">
		<li>Tab 1</li>
		<li>Tab 2</li>
		<li>Tab 3</li>
		<li>Tab 4</li>
		<li>Tab 5</li>
	</ul>

	<ul class="content">
		<li>Tab content 1</li>
		<li>Tab content 2</li>
		<li>Tab content 3</li>
		<li>Tab content 4</li>
		<li>Tab content 5</li>
	</ul>
</div>

As you can see, two independent lists are used, one containing the headers, and the other holding the content.

Actually, I don't like such arrangement, mainly because there is no semantic link between the header and the content. Though I'm not addicted to absolutely valid and semantic HTML just for the sake of respect of web geeks, this lack of a link was a drawback. Firstly, the data will be taken from the backend in two steps (first the headers, then the content), not in one; that's not much, but it adds to the volume of code and cannot be good for performance. Secondly, the client-side script for toggling tabs will be more voluminous and complicated, especially if there are several blocks with tabs on the webpage.

So I decided to try and fix those shortcomings, hopefully not overtaxing my brain. :) First of all, when selecting the element structure, I thought about the list, which is just perfect for the task. I guess I'm not the first web developer who makes tabs using that kind of list. Here's what I've accomplished.

Surely, you can just copy/paste the code, but I suggest that you first consider how this solution works.

Let's assume we have a set of elements for which the float: left attribute is set:



What happens if we set the float: right attribute for one of the elements?



As you can see, The result is good enough — the elements following are placed on the same line after the preceding ones. However, we need the tab content to be stretched to the whole width, so we set width: 100% for this element:



As expected, the element has broken the document flow. Let's think about it: if an element is snapped to the container's right edge, then changing the container's width will shift the element's left edge (i.e., increases from right to left). Therefore, we need to suppress the influence of the element's left edge, and that can be done by setting margin-left: -100%:



Now we only need to move the element down, which can be accomplished using the margin-top attribute:



That's all! To hide all elements by default, we set the display: none attribute for them, while setting display: block for the selected element. The jQuery-based tab-toggling script is very simple:

$(function(){
	$('dl.tabs dt').click(function(){
		$(this)
			.siblings().removeClass('selected').end()
			.next('dd').andSelf().addClass('selected');
	});
});

The solution is not ultraflexible, as we are using the exact size of a tab, but can be handy for many similar tasks.

Don't forget to Subscribe to our RSS feed and Follow us on Twitter - for recent updates.

Share this post if you like it