Abstract Project Description Implementation Code
Breaking up long content articles into separate pages can be tedious, as is presenting long content and forcing the reader to scroll more than a screen height. It would be much easier to maintain an article with all content on one page, but present the content sections through a dynamic table of contents for readers.
This article describes (and uses) a method implemented in CSS and ECMA Script (JavaScript), of hiding and revealing content, thereby minimizing scrolling to view long content but allows the author to keep all the content in one easily-maintained HTML document.
I had read an article describing this technique some time ago. However, when I needed it for a current project, I could neither find my notes nor re-locate the article online, so I had to re-generate the method. Here’s my solution.
In combination with JavaScript, CSS visibility and position attributes are used. Initial conditions are set in the markup by setting CSS classes for blocked content. DOM element attributes are then manipulated by JavaScript functions that are called by Table of Contents or other navigation links.
CSS sets initial conditions of the content blocks. That is, which content is to be initially visible and which blocks are to be initially hidden. Some browsers (such as MSIE) leave space for blocks with a visibility value of hidden, so the hidden block “position” value is set to “absolute” to take them out of the code stream. MSIE also requires that the visible class occurs above the hidden class in the stylesheet. You can put CSS into the <head> of the document or in a linked external stylesheet.
<style type="text/css">
/* initial conditions */
.visible {
position: relative;
visibility: visible;
}
.hidden {
position: absolute;
visibility: hidden;
{
</style>
JavaScript make the dynamics work. Clicking a link in the markup (see below) calls the reveal() function. It, in turn, first calls the hideAll() function to hide any previously revealed content blocks. You can put it into the <head> of the document or in a linked external script file. Again, notice that the position attributes are changed to remove the blocks from the display stream even when they are “hidden”.
<script type="text/javascript">
// Hide/reveal functions
function hideAll()
{
var i = 0;
var divs = document.getElementsByTagName('div');
while (i < divs.length)
{
divs[i].style.visibility = 'hidden';
divs[i].style.position = 'absolute';
i++;
}
}
function reveal(which)
{
hideAll();
var div = document.getElementsByTagName('div')
div[which].style.visibility = 'visible';
div[which].style.position = 'relative';
}
</script>
Place content in divs with different id values so the markup links can choose them. Set the initial class of the default content to “visible”, and all the others to “hidden”:
<div id="default" class="visible"> <h2>Initially hidden content</h2> <p> Blah, blah, black shleep. </p> </div> <div id="others" class="hidden"> <h2>Initially hidden content</h2> <p> Blah, blah, invisible shleep. </p> </div>
Activate with anchors having normal on-page hrefs and onclick attribute values that call the reveal function with the ids of the blocks you wish to be revealed. These can be put into menus or a “Table of Contents” list at the top of the article as I’ve done here. In that case you can put them in a <blockquote> and style with a CSS rule such as .toc {display: block;}:
<a class="toc" href="#default" onclick="reveal('default');return false;">Default</a>
<a class="toc" href="#others" onclick="reveal('others');return false;">Others</a>
The return false; statement is needed to keep the browser from using the actual href. Putting a real on-page link target in the href attribute makes the window status line act normally on mousing over the link.