Website Development Resources
CHouseLive

Tabbed Content

Buenos Aires

Buenos Aires is the capital and largest city of Argentina, and the second-largest metropolitan area in South America, after São Paulo. It is located on the western shore of the estuary of the Río de la Plata, on the southeastern coast of the South American continent.

street in Buenos Aires

Spanish settlers founded Buenos Aires in 1536, but they left the area five years later because of Indian attacks. A group of settlers from Paraguay, led by a Spanish soldier named Juan de Garay, reestablished Buenos Aires in 1580.

Cape Town

Located on the shore of Table Bay, Cape Town is the second-most populous city in South Africa, and the largest in land area, forming part of the City of Cape Town metropolitan municipality. It is the provincial capital and primate city of the Western Cape, as well as the legislative capital of South Africa, where the National Parliament and many government offices are located.

Steet in Cape Town

The Portuguese explorer Bartolomeu Dias, who sailed around the cape in 1488, is said to have named it Cabo da Boa Esperanca (Cape of Good Hope) because he hoped it lay on the way to the riches of Asia. Jan van Riebeeck, an employee of the Dutch East India Company, founded Cape Town. He arrived in April 1652 to set up a refreshment station for the company. By 1657, the first farmers had settled along the banks of the Liesbeeck River.

Sydney

Sydney is the largest and most populous city in Australia and the state capital of New South Wales. Sydney is located on Australia's south-east coast of the Tasman Sea.

Street in Sydney

After Britain lost its American Colonies in the Revolutionary War in America (1775-1783), the British government needed a new place to send some of the convicts overcrowding its prisons. It decided to establish a penal colony in New South Wales. In May 1787, a group of British ships called the First Fleet, carrying about 750 convicts, some of their families, guards, and officials, set sail for Australia under the command of Arthur Phillip. On Jan. 26, 1788, the fleet arrived and raised the British flag at Sydney Cove.

If you analyse this web page, you will note that there are two sets of tab content within the page:

  1. the demonstration itself, a vertically styled set of tabs, and

  2. the footer you are currently reading which makes use of a horizontally styled set of tabs.

Tabs such as these enable the web designer to chunk content making information easier to find and allowing large amounts of information to be displayed within a small area.

Both sets of tabbed content make use of unwrongest.com's jQuery tabify script. This script is not only small (1.06kb) but also highly adaptable, and degrades gracefully so that when javascript is disabled the tabs act as anchors while all the content is still accessible to the end user.

<div class="tab-container">

  <div id="tab-left">
  	<ul>
  	  <li class="active"><a href="#tab1"><img src="image1.jpg" width="150" height="75" alt="" /><br />Caption 1</a></li>
  	  <li><a href="#tab2"><img src="image2.jpg" width="150" height="75" alt="" /><br />Caption 2</a></li>
  	  <li><a href="#tab3"><img src="image3" width="150" height="75" alt="" /><br />Caption 3</a></li>
  	</ul>
  </div><!-- end "tab-left" -->

  <div id="tab1" class="box">
    <h3>Title 1</h3>
    <p>Text...</p>
  </div><!-- end "tab1" -->

  <div id="tab2" class="box">
    <h3>Title 2</h3>
    <p>Text...</p>
  </div><!-- end "tab2" -->

  <div id="tab3" class="box">
    <h3>Title 3</h3>
    <p>Text...</p>
  </div><!-- end "tab3" -->

</div><!-- end "tab-container" -->
.tab-container{
  padding:0;
  margin:0 auto;
  overflow: hidden;
  width:732px;
}

#tab-left{
  margin:0;
  padding:0;
  width:182px;
  float:left;
  display:inline;
  font-size:.9em;
}

#tab-left ul{
  margin:0;
  padding:0;
  list-style-type:none
}

#tab-left li{
  padding:0;
  margin:5px;
  text-align: center;
}

#tab-left li a {
  border:#fff solid 1px;
  color:#000;
  margin:0;
  padding:10px;
  text-decoration:none;
  font-weight: bold;
  display: block;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#tab-left li a:hover, #tab-left li.active a{
  border:#2080D0 solid 1px;
  text-decoration: none;
  color: #2080D0;
}

#tab-left li.active a{
  cursor: default;
}

#tab-left li a:hover, #tab-left li a:active, #tab-left li a:focus{
  outline: none;
}

.box{
  width:518px;
  border:1px #2080D0 solid;
  padding:0 10px;
  margin:5px;
  font-size:1em;
  float:right;
  display:inline;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#tab-left li img, .box img{
  padding: 0;
  margin: 0 auto;
  border: none;
  -moz-box-shadow: 2px 2px 4px 0 #B2B2B2;
  -webkit-box-shadow: 2px 2px 4px 0 #B2B2B2;
  box-shadow:2px 2px 4px 0 #B2B2B2;
  display: block;
}

.box h3{
  padding: 10px 0 10px 0;
  margin: 0px;
  color:#2080D0
}
  1. Attach the JQuery library

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    You can also download your own copy of the JQuery library.

  2. Attach the tabify script

    <script src="tabify.js" type="text/javascript"></script>
    (function($){
         $.fn.extend({
             tabify: function() {
    			function getHref(el){
    				hash = $(el).find('a').attr('href');
    				if(hash)
    					return hash.substring(0,hash.length-4);
    				else
    					return false;
    				}
    		 	function setActive(el){
    				$(el).addClass('active');
    				if(getHref(el))
    					$(getHref(el)).show();
    				else
    					return false;
    				$(el).siblings('li').each(function(){
    					$(this).removeClass('active');
    					$(getHref(this)).hide();
    				});
    			}
    			return this.each(function() {
    				var self = this;
    
    				$(this).find('li>a').each(function(){
    					$(this).attr('href',$(this).attr('href') + '-tab');
    				});
    
    				function handleHash(){
    					if(location.hash)
    						setActive($(self).find('a[href=' + location.hash + ']').parent());
    				}
    				if(location.hash)
    					handleHash();
    				setInterval(handleHash,100);
    				$(this).find('li').each(function(){
    					if($(this).hasClass('active'))
    						$(getHref(this)).show();
    					else
    						$(getHref(this)).hide();
    				});
                });
            }
        });
    })(jQuery);
  3. Initialize the tabify script

    <script type="text/javascript">
    	$(document).ready(function () {
    		$('#tab-left').tabify();
    	});
    </script>

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org