How To: Create a Tabbed Box with YUI Tabs

[1]

Tabbed boxes are all the rage these days. Check out the "Explore" section on MSNBC [2], or the Premium News Theme [3] to see how they can be used in a blog setting. I think it's for a good reason. It allows you to add more content to a page with less clutter while engaging visitors to interact with the site. Plus it's just kinda fun.

Note how these "tabbed boxes" work. They instantly change the content inside the box when you click a new tab -- no loading from the server required. That is because the content for all the tabs is loaded when the page is loaded, but hidden away until the corresponding tab is clicked.

Using the Yahoo! UI Tab View [4], creating a tabbed box is really pretty easy. Here's how:

1. Include the Javascript files on your page.

...
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>

<body>
	<script type="text/javascript">
	var myTabs = new YAHOO.widget.TabView("content-explorer");
	</script>
...

2. Add the markup for the box.

<div id="content-explorer">
	<ul class="yui-nav">
		<li class="selected"><a href="#">Articles</a></li>
		<li><a href="#">Photos</a></li>
		<li><a href="#">Video</a></li>
		<li><a href="#">Leprechaun</a></li>
	</ul>
	<div class="yui-content">
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
		<div>
			...
		</div>
	</div>
</div>

Everything in this markup is important for this to work, including all the ID and class names for all the elements. Notice how there is four list items in the "yui-nav" and four divs in the "yui-content", that is also important. Those should always equally correspond.

3. Style with CSS

#content-explorer {
	padding-top: 20px;
	width:100%;
	line-height:normal;
	}
	#content-explorer ul {
		padding: 10px 10px 0;
		list-style: none;
		max-width: 770px;
		background: url(images/menu_bg.gif) bottom repeat-x;
		height: 31px;
		}
		#content-explorer ul li {
			float: left;
			background: url(images/right.gif) right top no-repeat;
			text-align: center;
			overflow: hidden;
			margin-left: 5px;
			}
			#content-explorer ul li a {
				display: block;
				background: url(images/left.gif) left top no-repeat;
				padding: 10px 20px 6px 20px;
				font-weight: bold;
				color: #999;
			}
			#content-explorer ul li a:hover {
				color: #990000;
			}
			#content-explorer ul li.selected {
				background: url(images/right_cur.gif) right top no-repeat;
			}
			#content-explorer ul li.selected a {
				background: url(images/left_cur.gif) left top no-repeat;
				padding-bottom: 8px;
				color: #990000;
			}
.yui-content {
	overflow: auto;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	border-left: 2px solid black;
	padding: 20px;
}

The CSS is completely up to you, there are no naming limitations like there was in the markup. Don't worry about setting display values in there to hide the content of the different tabs, the Javascript will do that for you automatically.

To me, the really cool part about this is just how flexible all of this is. You can do whatever you can dream of inside those divs in the content area.

[EXAMPLE PAGE] [5]

[DOWNLOAD EXAMPLE] [6]