wow, that's perfect, and much cleaner, makes a lot of sense. Thank you so much.
im still stuck on the last part, howto hide the text part completely until i click the button i.e.: <p>My name is <span id="output1"></span>, and i named my son <span id="output2"></span> too. We live in <span id="output3"></span>.</p>
i found a script which unhides the text but im having trouble putting the two together, and im sure there must be a better way to do it
here is the unhide script which i have to admit i didnt write, im still new to this, but im trying to put the two together:
<!DOC HTML>
<html>
<head>
<script type="text/javascript">
function unhide(divID) {
var sel = document.getElementById('2').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel.id != divID) { sel.className = 'hidden'; }
}
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.hidden { visibility: hidden; }
.unhidden { visibility: visible; }
</style>
</head>
<body>
<div id="1">
<a href="javascript:unhide('hiddencontent1')">Run</a>
</div>
<div id="2">
<div id="hiddencontent1" class="hidden">
<p>My name is <span id="output1"></span>, and i named my son <span id="output2"></span> too. We live in <span id="output3"></span>.</p>
</div>
</div>
</div>
</body>
</html>