Tabs and Tab Groups

Tabs and Tab Groups are a custom construct for the MSU website. They're extremely easy to set up and can be used to present multiple categories of information in a small space. For example:

Languages

HTML, JS, CSS

Frameworks

jQuery, Enyo

Tools

Photoshop, Programmer's Notepad

The HTML code below will show you how to build this example step-by-step.

How to put a Tab Group on your page

1: Create the tab group

<div class="tab-group">
</div>

2: Create a few tabs

<div class="tab-group">
	<div class="tab-content">
	</div>
	<div class="tab-content">
	</div>
	<div class="tab-content">
	</div>
</div>

3: Add tab labels using H2 tags

<div class="tab-group">
	<div class="tab-content">
		<h2>Languages</h2>
	</div>
	<div class="tab-content">
		<h2>Frameworks</h2>
	</div>
	<div class="tab-content">
		<h2>Tools</h2>
	</div>
</div>

4: Put content in the tabs

<div class="tab-group">
	<div class="tab-content">
		<h2>Languages</h2>
		<p>HTML, JS, CSS</p>
	</div>
	<div class="tab-content">
		<h2>Frameworks</h2>
		<p>jQuery, Enyo</p>
	</div>
	<div class="tab-content">
		<h2>Tools</h2>
		<p>Photoshop, Programmer's Notepad</p>
	</div>
</div>

The site's standard JavaScript will take care of the rest.