dreamweaver course london - Layers

Karen,

This is indeed a tricky one!

Around this web site, we use javascript functions to accomplish this, and because it's all viewable in our source code, there is no need to hide it away from you or anyone else!

First, save this into a javascript file (eg. global.js)

var supported = (document.getElementById || document.all);
if (supported) {
// set all to be initally false (ie. not shown / none)
var max = 7;
var shown = new Array();
for (var i=1;i<=max;i++) {
shown[i+1] = false;
}
}

function blocking(i) {
if (!supported) {
alert('Sorry, this link does not work in your browser.');
return;
}
// reverse current state
shown[i] = (shown[i]) ? false : true;
// set css display value
current = (shown[i]) ? 'block' : 'none';
// set
currentimg = (shown[i]) ? 'on' : 'off';
if (document.getElementById) {
document.getElementById('comment_'+i).style.display = current;
}
else if (document.all) {
document.all['comment_'+i].style.display = current;
}
}

Then, whenever you want an 'expand' doovy, use this code:

<a href="" onClick="blocking(RANDOM NUMBER); return false">Click me to expand</a>
<div class="comment_off" id="comment_RANDOM NUMBER">
Whatever you want to reveal here
</div>

Then ensure you have this CSS code on all your pages

comment_off {
display: none;
}

You'll also need to link your HTML file to the javascript file in the HEAD part of your document (template is best), like this:
<script language="javascript" type="text/javascript" src="/asset/script/global.js"></script>

This assumes your javascript file is in a folder asseet/script.

Hope this helps!

Regards, Rich