« »

This is another script, similar to Collapsible Navigation Menus to display/hide related content just by one click, of course just one data page, subject is open each time. However, design in this script is not better.

Label: semantic, On-Page, content, list, collapsible, navigation, display, hide, design, data page, subject

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
<!--
// Created by: skatan :: http://snipplr.com/users/skatan/

function setLink(i) {
		a[i].onclick = function () {
			 div[i].style.display = "block";
 			for(var j = 0; j < div.length; j++) {
  				if (i != j) {
 	  				div[j].style.display = "none";
  				}
  		} 
		return false;
		}
}
	
function initTabs() {
		var tabs = document.getElementById("tabbed_sub"); // put in id for tabbed list here
		var links = tabs.getElementsByTagName("a");
		div = [];
		a = [];
		
		//Initialize tabs
		for (var i = 0; i < links.length; i++) {
			 div[i] = document.getElementById(links[i].href.substr(links[i].href.indexOf("#") + 1));
			 if (i != 0) {
				  div[i].style.display="none";
 			} else { 
	  			div[i].style.display="block";
 			}
 			a[i] = links[i];
 			setLink(i)
		}
}
	
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  initTabs();
});
//-->
</script>

Copy All x2

<ul id="tabbed_sub">
	<li><a href="#one">Travel to London with Us</a></li>
	<li><a href="#two">Itinerary</a></li>
	<li><a href="#three">Prices</a></li>
</ul>

<div style="display: block;" id="one">London is the capital city of
England and the United Kingdom, a mix of history, architecture and
culture has created an amazing and constantly evolving city.</div>

<div style="display: none;" id="two"><ul style="margin-top: 1pt;">
  <li><strong>Day One:</strong>
Visit Westminster Abbey, the Royal Tombs, and Poets' Corner. Afterward,
stroll around the Houses of Parliament. Later in the afternoon, explore
Piccadilly Circus, the teeming epicenter of London's West End. Have
dinner in Soho.</li>
  <li><strong>Day Two:</strong> Visit Green Park.
Buckingham Palace and the changing of the Guard. Visit the Royal Mews,
Trafalgar Square, the National Gallery. After dinner in the Covent
Garden area or on the Thames, pick up your travel guide or ask a
friendly-looking Londoner for a recommendation for a bar, pub, or club.</li>
  <li><strong>Day Three:</strong>
Visit The Tower of London. Explore the precincts on your own, making
certain you allot enough time to see the Crown Jewels. From the Tower,
head over to nearby St. Paul's Cathedral.</li>
</ul></div>

<div style="display: none;" id="three">$1,250 per person, including air and breakfast.</div>
</div>