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

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

36 of 47 people (77%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

How to create a collapsible chapter/section list?
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

Feb 19th, 2009 13:18
alex martin, Gaje Pavlin, 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>
</body>
</html>
http://automobile.easyfindindia.com/
http://bollywood.easyfindindia.com/
http://cloth-shopping.onlineindiadiary.com/
http://easyfind.j4ulive.com/
http://www.onlineindiadiary.com/
http://finance-guide.easyfindindia.com/
http://freelance-jobs.onlineindiadiary.com/
http://gadgets.easyfindindia.com/
http://www.easyfindindia.com/
http://gift-ideas.easyfindindia.com/
http://health-fitness.easyfindindia.com/
http://home-improvement.j4ulive.com/
http://homedecor.easyfindindia.com/
http://mortgage.onlineindiadiary.com/
http://online-business.j4ulive.com/
http://online-education.j4ulive.com/
http://onlinein.j4ulive.com/
http://pets-online.easyfindindia.com/
http://realestate.easyfindindia.com/
http://sports-in-india.easyfindindia.com/
http://travel-guide.easyfindindia.com/
http://wedding-shopping.j4ulive.com/
http://www.j4ulive.com/