Next steps with Performer

Step 4: Modifying the news feeds to use Tabber

Now we need to put all the news feeds into the page, and 'wrap' them in a containing element, like this:

<ul id="newsfeeds">
	<li id="feed1" class="tab">
		<h3>News feed 1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem odio, dapibus quis, aliquam et, rutrum eget, leo. Sed id dolor. Nam pretium eros ut metus. Curabitur id magna ultricies urna rutrum porta. Suspendisse est. Donec sagittis lacus sit amet arcu bibendum semper. Integer magna. Proin ultricies arcu sed odio.</p>
	</li>
	<li id="feed2" class="tab hider">
		<h3>News feed 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem odio, dapibus quis, aliquam et, rutrum eget, leo. Sed id dolor. Nam pretium eros ut metus. Curabitur id magna ultricies urna rutrum porta. Suspendisse est. Donec sagittis lacus sit amet arcu bibendum semper. Integer magna. Proin ultricies arcu sed odio.</p>
	</li>
	<li id="feed3" class="tab hider">
		<h3>News feed 3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem odio, dapibus quis, aliquam et, rutrum eget, leo. Sed id dolor. Nam pretium eros ut metus. Curabitur id magna ultricies urna rutrum porta. Suspendisse est. Donec sagittis lacus sit amet arcu bibendum semper. Integer magna. Proin ultricies arcu sed odio.</p>
	</li>
	<li id="feed4" class="tab hider">
		<h3>News feed 4</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sem odio, dapibus quis, aliquam et, rutrum eget, leo. Sed id dolor. Nam pretium eros ut metus. Curabitur id magna ultricies urna rutrum porta. Suspendisse est. Donec sagittis lacus sit amet arcu bibendum semper. Integer magna. Proin ultricies arcu sed odio.</p>
	</li>
</ul>

You'll see I've given each news feed a unique id and the CSS class tab - this tells the Tabber function which elements are a tab. I've also added the hider CSS class to feeds 2, 3 and 4. This means that only feed 1 will be shown by default.

Now we can add the links to show the different tabs. They look like this:

<ul>
	<li><a href="#" class="tabber tabGroup-newsfeeds tab-feed1">Feed 1</a></li>
	<li><a href="#" class="tabber tabGroup-newsfeeds tab-feed3">Feed 2</a></li>
	<li><a href="#" class="tabber tabGroup-newsfeeds tab-feed3">Feed 3</a></li>
	<li><a href="#" class="tabber tabGroup-newsfeeds tab-feed4">Feed 4</a></li>
</ul>

For each link I've given it the CSS class of tabber, a CSS parameter of 'tabGroup' containing the id of the element containing all the tabs, and a CSS parameter of 'tab' containing the id of the tab I want to show when this link is clicked. Try it out here. Go to step 5....

Pages: 1 2 3 4 5 6 7 8