Fog of Eternity | Website design and discussion

While the Links page on the site is currently being reviewed, and so is looking pretty barren, I thought I’d take a moment to point out how it’s put together. The use of “drawers” is a simple function that can really make a difference to a page layout, particularly if you’ve got a lot of information that would make a single page very lengthy but which might not logically fit on several individual hyperlinks. Drawers let visitors to the site open and close sections of page content without the need to switch pages or reload, allowing them to focus on specific sections and topics.

Click here to open/close a drawer

Drawers are easily set up using CSS and a little bit of Javascript.

We use Javascript to change a div element that is set to display: none to display: block when the link to expand it is clicked. This “opens” the drawer, and makes the content visible.

function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.parentNode.nextSibling;

if (targetElement.style.display == “block”)
{
targetElement.style.display = “none”;
}
else
{
targetElement.style.display = “block”;
}
}
}

Now if we place content in a div class which we’ve given the display: none value, and place that after a link as detailed below, we’ll have an expandable drawer.

Except there is a problem here. If we just put the class with display: none value in our main CSS class, then anyone browsing with Javascript disabled isn’t going to be able to see it at all. We’re using Javascript to change that display property to make our drawer visible. So we need to make the method more accessible.

This requires a new CSS sheet and another small bit of Javascript. The CSS is going to define the class which has display:none, and we’re going to make the Javascript load that CSS file. This means that if someone has Javascript disabled then all the content of that class will be visible - i.e. all the drawers will be open. But if Javascript is enabled then a new CSS file will be added to our cascade, and will make that class invisible.

The CSS file is really easy.

.CLASSNAME {
display: none;
}

The Javascript file just sets the parameters for loading the additional CSS file.

var cssNode = document.createElement(’link’);
cssNode.setAttribute(’rel’, ’stylesheet’);
cssNode.setAttribute(’type’, ‘text/css’);
cssNode.setAttribute(’href’, ‘PATH/CSSFILENAME.CSS‘);
document.getElementsByTagName(’head’)[0].appendChild(cssNode);

The HTML for setting drawer toggles is also very straightforward.

<a href=”#” title=”Toggle Drawer” onlick=”toggle(this); return false;”>This button toggles the drawer open/closed</a>
<div class=”CLASSNAME”>
Content goes in this div, where CLASSNAME is the name given to the expandable section CSS.
</div>

I find drawers can be very useful in providing some additional flexibility and functionality to individual web pages, and hopefully the above guidance will help you incorporate them into your code.