Exercise 11: Simple Tabs


Example:

 

PUT THE CONTENT FOR THE FIRST TAB HERE

 

Code:

 <div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

 

Troubleshooting:

  • I think you need a decent (more than beginner, but not totally advanced) knowledge of HTML to work with this code though because I've found editing it in the page view doesn't work quite so well. If you edit the content in the HTML view within the opening and closing tags then it works pretty slick.
  • Isaac Piercy Links to an external site. found it's pretty easy to design each of the "tabs" as separate content pages, then when grab the HTML and paste it into this template.