Go Back to Dynamic Site Solutions :: JavaScript

Swapping Displayed Elements

Here's an example of an unobtrusive JavaScript/DOM script that can be used to effectively split a page up into sub-pages. You could also use something like this script to toggle navigation sections on a page.

Before using this function to swap large blocks of content, I recommend that you consider putting each section of content in a separate page.

Demonstration

Click the links to switch between the sections.

Section 1

Here's an example paragraph in the first section.

Section 2

Here's another example paragraph, this time in the second section.

Section 3

And finally, here's an example paragraph, in the third section.

Explanation of the code

This commented version of the code includes most of the code used but does not include the helper functions used to handle the classes or to add the onload event. The very simple function used to attach an event handler to the onload event is used here because of its simplicity. In a real page I would most likely use a more robust event handling function.

function makeToggleSection(
  idArray, // an array of the IDs for the sections
  textAr, // an array of the text for link to each section
  par, // an object reference to the element we'll append the list to
  initIndex) { // the section you want shown first, starting at 0,
    // or -1 to hide them all initially
    
  // Here we make sure that the browser supports DOM1+.
  if(!document.getElementsByTagName || !document.createTextNode)
    return;
  
  // Here we make sure that all of the required arguments were included.
  if(!par || !idArray || !textAr || !idArray.length || !textAr.length)
    return;
  
  // This creates two variables that we'll use later in the function.
  var elm,elm2;

  // Here we hide all of the sections except for the active one.
  for(var i=0,l=idArray.length;i<l;i++) {
    if(i == initIndex) continue;
    elm = document.getElementById(idArray[i]);
    if(!elm) continue;
    elm.style.display='none';
  }

  // Here we create the list of links which is used to control which
  // section is visible.
  var list=document.createElement('ul');
  for(var i=0,l=textAr.length;i<l;i++) {
    elm = document.createElement('li');
    elm2 = document.createElement('a');
    elm2.appendChild(document.createTextNode(textAr[i]));
    elm2.href = '#'+idArray[i];
    elm.appendChild(elm2);
    list.appendChild(elm);
  }
  list=par.appendChild(list);
  
  // Here we attach the onclick handler to the list.
  list.onclick=function(){
    return function(e){
    e = e||window.event;
    var el=e.target||e.srcElement;
    while(el.nodeType != 1) el=el.parentNode; //NS6 fix
    if(el.nodeName.toLowerCase() != 'a') return;
    var elm,links = list.getElementsByTagName('a');
    for(var i=0,l=links.length;i<l;i++) {
      elm = document.getElementById(idArray[i]);
      if(!elm) continue;
      if(links[i]==el) {
        addClassName(links[i],'active');
        elm.style.display='';
      } else {
        removeClassName(links[i],'active');
        elm.style.display='none';
      }
    }
    return false;
  }}();
  if(initIndex >= 0) {
    // Here we add the class to the active link, if there is one.
    addClassName(list.getElementsByTagName('a')[initIndex],'active');
  }
}

// This conditional is used to prevent errors in ancient browsers, 
// like IE4 and NS4.
if(document.getElementById) {
  dss_addLoadEvent(function(){
  // Here is the call to the function. We call it after the page has
  // loaded so that we can access all elements in the DOM.
    makeToggleSection(
      ['section1','section2','section3'],
      ['Section 1','Section 2','Section 3'],
      document.getElementById('togList1'),
      0
    );
  });
}
Last update: 2007-04-02