How To Hide And Show Elements To Create A One-Off Page

on Wed May 14 00:40:30 GMT 2008 in Javascript and viewed 23024 times

Frequently you will need to create a quick website to organize your information. Whether it’s for a quick page advertising a software you’re selling, or just to give some information, static HTML will most likely will be used. But instead of a long boring HTML page, or more complicated and time consuming multiple HTML pages, you can easily organize your information using javascript. This tutorial will show you how to create information and then, using the Document Object Model, hide and display different pages for a unique organisation technique. This is all fully compatible for people who do not have javascript enabled as well. If you still don’t understand, look at the example.


If You Don’t Understand…

This concept is hard to explain. An example is something like moofx but without the cool effects. Instead of the accordion features, this will be just one page wil some information. The navigation will be links that will show or hide divs for information. To see the end result, browse to here: End Result of Tutorial.

To Think Things Through…

For the Document Object Model to work, it usually hinges on elements with ids. For the content “pages,” there will be three divs for three pages of content. Each div will have its own id of “page” + the number of the page for modifying. These will be contained within one overall div with an id of “information” which will allow you to access the children “pages” easier.

So here is the HTML structure and style. This won’t change at all during the whole tutorial, just the javascript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-us">
<head>
<title>Quick One Page Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background-color:#647D8F; }
a { color:#647D8F; }
a:hover { color:#648F7D; }

#layout { width:770px;
    margin:10px auto; }

#navigation li { display:inline;
    padding:.3em;
    border:3px solid #6096BF;
    background-color:#CFDCE6; }
#navigation li:hover { border-color:#60BF96; }

#information { background-color:#CFE6DC;
    border:5px solid #648F7D;
    margin-top:15px;
    padding:.5em; }
</style>
</head>
<body>
<!--layout-->
<div id="layout">

<!--navigation-->
<ul id="navigation">
<li><a href="#" onclick="pageSwitch(1); return false;">Page 1</a></li>
<li><a href="#" onclick="pageSwitch(2); return false;">Page 2</a></li>
<li><a href="#" onclick="pageSwitch(3); return false;">Page 3</a></li>
</ul>
<!--/navigation-->

<!--information-->
<div id="information">

<div id="page1">
<h2>Page 1</h2>
<p>This is some content for page 1. It's cool.</p>
</div>

<div id="page2">
<h2>Page 2</h2>
<p>This is some content for page 2. It's cooler.</p>
</div>

<div id="page3">
<h2>Page 3</h2>
<p>This is some content for page 3. It's coolest.</p>
</div>
</div>
<!--/information-->

</div>
<!--/layout-->
</body>
</html>

As you can see, the page structure is nothing special. Just one of my classic boxy designs that’s blue-ish green. The navigation links are very simple. You can change the href attribute, the links won’t go anywhere if you have javascript activated. The onclick attribute has two statements: the function to switch the page (taking the argument of the page’s id) and return false, which tells the link not to follow through the href attribute. Therefore, you can change the link to any location, but it shouldn’t matter. The rest of the HTML is just for structure and style.

Hiding All But One

Now that your page has loaded you need a way to instantly hide all the other pages except for page1, which should be what you start on.

Manually programming in each div would be cumbersome, and not be practical. The other way would be to cycle through each div inside the information element and hide them, afterwards showing the page that should be shown. I personally like the latter. This script goes after the pages have been defined.


<script type="text/javascript">
var divs = document.getElementById("information").getElementsByTagName("div");
for(i = 0; i < divs.length; i++){
    divs[i].style.display = "none";
}
document.getElementById("page1").style.display = "block";
</script>

It’s pretty simple as this goes. The variable “divs” is defined as an array of the divs (or pages) inside the element “information.” Then a “for” loop is started, defining i as 0, and increasing it by 1 until it equals the amount of divs in the array. Each div in the divs array has its display style set to “none,” effectively hiding it. Each div is accessed by using the i variable as the entry in the array divs. For the final step, the page1 div is displayed by finding the element with the id of “page1” and setting its display style to block. So each div is hidden, and the first page is unhidden showing just the first page.

Switching The Pages

This is the final part to a very short tutorial. There should be a variable to contain the current page at all times, so it should theoretically be defined outside the function as to not be redefined the same every time a link is clicked. The function should take an id and hide the current, and show the id passed in. And then the current should be redefined as the id.

This script should go in between the <head> tags.


<script type="text/javascript">
var current = "1";
function pageSwitch(id){
    if(!document.getElementById) return false;
    var div = document.getElementById("page"+id);
    var curDiv = document.getElementById("page"+current);
    curDiv.style.display = "none";
    div.style.display = "block";
    current = id;
}
</script>

This is basically exactly what I said. Current is defined as 1 which is the first page. The function takes one argument, the id. The first line of the function says that if the browser does not have the ability for document.getElementById, to immediately return false. Then div is defined as the element page with the argument concatenated onto the end. The variable curDiv is defined as page with the value of current concatenated onto the end of it. Then the current div is hidden and the new div is shown. For the final step, the variable current is redefined to id, which is the new current page.

Conclusion

There’s your one off page. Go out and use it. It can be very useful for many things. I can think of a few ideas I’ll plan on using it for. But make sure not to overuse it where you can easily do something else. But it’s also a great concept to use for many other things like layout elements.

And here’s your end result.

Ideas To Expand

  1. Add Some Cool Effects
  2. Use the concept for some other idea
  3. More pages
  4. Javascript optimization