FAQTs - Knowledge Base - View Entry - How to create a collapsible chapter/section list?

faqts : Computers : Programming : Languages : JavaScript : DHTML : DOM

+ Search

Entry

How to create a collapsible chapter/section list?

How can I add sub-sections to the collapsable menu? (ex.- Chapter 1, Section 1, Content 1

For the collapsible chapters script how to I add the collapse and expand link in front of the chapte

Oct 23rd, 2004 07:10
Martin Honnen, ken xzone9, Jermaine Williams,
The following is an example on how to start with a static HTML document
that works in browsers where scripting is disabled or not supported and
where script is used to enhance the use of the document by allowing to
collapse/expand sections of the document. All you need to do is
structure your document with <h1> elements and then script adds the
necessary structure and links to collapse/expand sections as needed in
browsers (like Netscape 6/7, Mozilla, FireFox, IE 5/5.5/6, Opera 7) that
support the W3C DOM to dynmically change the structure of the document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>collapsible chapters</title>
<script type="text/javascript">
var collapseDivs, collapseLinks;
function createDocumentStructure (tagName) {
  if (document.getElementsByTagName) {
    var elements = document.getElementsByTagName(tagName);
    collapseDivs = new Array(elements.length);
    collapseLinks = new Array(elements.length);
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var siblingContainer;
      if (document.createElement && 
          (siblingContainer = document.createElement('div')) &&
          siblingContainer.style) 
      {
        var nextSibling = element.nextSibling;
        element.parentNode.insertBefore(siblingContainer, nextSibling);
        var nextElement = elements[i + 1];
        while (nextSibling != nextElement && nextSibling != null) {
          var toMove = nextSibling;
          nextSibling = nextSibling.nextSibling;
          siblingContainer.appendChild(toMove);
        }
        siblingContainer.style.display = 'none';
        collapseDivs[i] = siblingContainer;
        createCollapseLink(element, siblingContainer, i);
      }
      else {
        // no dynamic creation of elements possible
        return;
      }
    }
    createCollapseExpandAll(elements[0]);
  }
}
function createCollapseLink (element, siblingContainer, index) {
  var span;
  if (document.createElement && (span = document.createElement('span'))) {
    span.appendChild(document.createTextNode(String.fromCharCode(160)));
    var link = document.createElement('a');
    link.collapseDiv = siblingContainer;
    link.href = '#';
    link.appendChild(document.createTextNode('expand'));
    link.onclick = collapseExpandLink;
    collapseLinks[index] = link;
    span.appendChild(link);
    element.appendChild(span);
  }
}
function collapseExpandLink (evt) {
  if (this.collapseDiv.style.display == '') {
    this.parentNode.parentNode.nextSibling.style.display = 'none';
    this.firstChild.nodeValue = 'expand';
  }
  else {
    this.parentNode.parentNode.nextSibling.style.display = '';
    this.firstChild.nodeValue = 'collapse';
  }
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}
function createCollapseExpandAll (firstElement) {
  var div;
  if (document.createElement && (div = document.createElement('div'))) {
    var link = document.createElement('a');
    link.href = '#';
    link.appendChild(document.createTextNode('expand all'));
    link.onclick = expandAll;
    div.appendChild(link);
    div.appendChild(document.createTextNode(' '));
    link = document.createElement('a');
    link.href = '#';
    link.appendChild(document.createTextNode('collapse all'));
    link.onclick = collapseAll;
    div.appendChild(link);
    firstElement.parentNode.insertBefore(div, firstElement);
  }
}
function expandAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
    collapseDivs[i].style.display = '';
    collapseLinks[i].firstChild.nodeValue = 'collapse';
  }
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}
function collapseAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
    collapseDivs[i].style.display = 'none';
    collapseLinks[i].firstChild.nodeValue = 'expand';
  }
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}
</script>
<script type="text/javascript">
window.onload = function (evt) {
  createDocumentStructure('h1');
}
</script>
</head>
<body>
<h1>Chapter 1</h1>
<p>This is chapter 1. This is chapter 1. This is chapter 1. This is
chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This
is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1.
This is chapter 1. This is chapter 1. This is chapter 1. This is chapter
1. This is chapter 1. This is chapter 1. This is chapter 1. This is
chapter 1. This is chapter 1. This is chapter 1. This is chapter 1. This
is chapter 1. This is chapter 1. This is chapter 1. This is chapter 1.
This is chapter 1. This is chapter 1. This is chapter 1. This is chapter
1.</p>
<h1>Chapter 2</h1>
<p>This is chapter 2. This is chapter 2. This is chapter 2. This is
chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This
is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2.
This is chapter 2. This is chapter 2. This is chapter 2. This is chapter
2. This is chapter 2. This is chapter 2. This is chapter 2. This is
chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This
is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2.
This is chapter 2. This is chapter 2. This is chapter 2. This is chapter
2.</p>
<p>This is chapter 2. This is chapter 2. This is chapter 2. This is
chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This
is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2.
This is chapter 2. This is chapter 2. This is chapter 2. This is chapter
2. This is chapter 2. This is chapter 2. This is chapter 2. This is
chapter 2. This is chapter 2. This is chapter 2. This is chapter 2. This
is chapter 2. This is chapter 2. This is chapter 2. This is chapter 2.
This is chapter 2. This is chapter 2. This is chapter 2. This is chapter
2.</p>
<h1>Chapter 3</h1>
<p>This is chapter 3. This is chapter 3. This is chapter 3. This is
chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This
is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3.
This is chapter 3. This is chapter 3. This is chapter 3. This is chapter
3. This is chapter 3. This is chapter 3. This is chapter 3. This is
chapter 3. This is chapter 3. This is chapter 3. This is chapter 3. This
is chapter 3. This is chapter 3. This is chapter 3. This is chapter 3.
This is chapter 3. This is chapter 3. This is chapter 3. This is chapter
3.</p>
</body>
</html>