Javascript/jQuery Tutorials

Lesson 3: Tabbed Content

How Do You Create Tabbed Content?

Let's learn!

Step 1

And once again, becuase we are working with jQuery, you need to make sure you have the provided code at the end of your HTML file, just above the closing body tag to load the jQuery library:

Step 2

Write your HTML file. You need a div to hold everything, a nav bar to select the different tabs, and of course your content. The code example in the tab below shows you how to set up the container, the nav bar, and create a div for the content of Sly Stalone's picture and bio that can be linked via its ID in the nav bar.

Step 3

Now add in some CSS styling to define the boundries of the container, and display the nav bar for selecting the tabbed content.

Step 4

Lastly, click the tab to see the Javascript/jQuery code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>/
<div class="tab-container">
				<nav class="tab-nav">
					<ul>
						<li><a href="#arnie" class="active">Arnold Schwarzenegger</a></li>
						<li><a href="#bruce">Bruce Willis</a></li>
						<li><a href="#sly">Sylvester Stallone</a></li>
					</ul>
				</nav>
				<div class="tab-contents">
				<div id="sly" class="tab-content">
				<h2>Sylvester Stallone</h2>
				<img src="images/sly-stallone.jpg" alt="Picture of Sylvester Stallone">
				<p>Sylvester Gardenzio Stallone (born July 6, 1946), nicknamed Sly Stallone, is an American actor, screenwriter and film director. Stallone is well known for his Hollywood action roles, particularly boxer Rocky Balboa, the title character of the Rocky series from 1976 to 2006, and soldierJohn Rambo from the Rambo saga, which ran from 1982 to 2008. He wrote every episode of the two franchises, and directed some of their instalments as well.</p>
				<p>Stallone directed, co-wrote and starred in the 2010 ensemble action film The Expendables, alongside many other distinguished actors. He reprised his role of Barney Ross in two more Expendables films, The Expendables 2 in 2012 and The Expendables 3 in 2014, although he did not return to direct the two sequels.</p>
				<p>Stallone's film Rocky was inducted into the National Film Registry as well as having its film props placed in theSmithsonian Museum. Stallone's use of the front entrance to the Philadelphia Museum of Art in the Rocky series led the area to be nicknamed the Rocky Steps. Philadelphia has a statue of his Rocky character placed permanently near the museum. It was announced on December 7, 2010 that Stallone was voted into boxing's Hall of Fame.</p>
				<p>In 1977, Stallone was nominated for two Academy Awards for Rocky, Best Original Screenplay and Best Actor. He became the third man in history to receive these two nominations for the same film, after Charles Chaplin and Orson Welles and followed by Woody Allen, Warren Beatty, Billy Bob Thornton, Matt Damon and Roberto Benigni.</p>
				</div>
.tab-container {
	margin-top: 30px;
	margin-bottom: 30px;	
}

.tab-nav a {
	text-decoration: none;
	width: 220px;
	text-align: center;
	line-height: 40px;
	display: block;
	float: left;
	border-right: 3px solid #cc3333;
	border-top: 3px solid #cc3333;
	font-weight: bold;
	color: #fff;
	background-color: #003366;
	position: relative;
	top: -1px;
	left: 0;
	
}

.tab-nav .active {
	border-bottom: 5px solid #003366;	
	background-color: white;
	color: #003366;
}

.tab-nav li:first-child a {
	border-left: 3px solid #cc3333;
	border-top-left-radius: 7px;
}

.tab-nav li:last-child a {
	border-top-right-radius: 7px;	
}

.tab-nav {
	height: 40px;	
}

.tab-content {
	clear:both;
}

.tab-content ul {
	list-style: disc;
	padding: 10px 0 10px 20px;
}

.tab-content li {
	padding-bottom: 5px;
}

.tab-contents {
	padding: 20px;
	border: 3px solid #cc3333;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.tab-content img {
	width: 200px;
	float: left;
}

.tab-content p {
	float: right;
	width: 75%;
	margin-bottom: 10px;
}
var $tabs = $('.tab-nav a');

var $tabActive = $('.tab-nav .active');

$tabContent = $('.tab-content');

displayActiveTab($tabActive);

$tabs.click(function(e) {
	e.preventDefault();

	$tabs.removeClass('active');

	$(this).addClass('active');

	displayActiveTab( $(this) );

});

function displayActiveTab(theTab) {
	$tabContent.hide();

	var id = theTab.attr('href');
	$(id).show();
}

Check you out, now you can create a container with tabs to change the content!