PDA

View Full Version : How to expand text on a page

icuryy
10-25-2002, 09:00 PM
Hi,
I've seen this before, yet I don't know how to approach it. I want to have a link (or a button, or anything), and when you click on it, there will be text coming out beneath it, and you can click it again to close that text block. Almost like the behavior of Windows Explorer, but instead of having a listing of folders, now we have text.
I want to keep everything within 1 file only. Just like having a block of text and being able to hide/reveal it dynamically.
Please help if you can :-)
Thanks...
beetle
10-25-2002, 09:25 PM
I've got a couple scripts in my library that do that. You can access the toggleDisp() function with an ID or object reference. The sniffer you see that I link to is identical to the one from this link (http://www.webreference.com/tools/browser/javascript.html), of course, you can substite in your own sniffer. I'll highlight the sniffer-pertinent code in blue<html>
<head>
<script src="http://www.peterbailey.net/fValidate/js/sniffer.js"></script>
<script>

function getNode(id) {
return (typeof document.layers != 'undefined') ? document.layers[id] : (document.getElementById || document.all)(id)
}

function toggleDisp(node) {
if (typeof node == 'string') node = getNode(node);
if (is_ie4up)
node.style.display = (node.currentStyle.display == 'none') ? 'block' : 'none';
else if (is_gecko) {
node.style.display = (node.style.display == 'none' || node.style.display == '') ? 'block' : 'none';
}
else
alert('Your browser does not have the javascript support for these menu features.\nPlease upgrade to the most recent version of Internet Explorer, Netscape, or Mozilla.');
}

</script>
</head>

<body>
<div onClick="toggleDisp(this.nextSibling)">Show/Hide</div>
<div style="display:none">Here is the text that was hidden, but now is not!</div>
<br>
<div onClick="toggleDisp('myDiv')">Show/Hide2</div>
<div id="myDiv" style="display:none">Here is the text that was hidden, but now is not!</div>
</body>
</html>
Mr J
10-25-2002, 09:25 PM
Here is something for you to have a play with




<SCRIPT language="JavaScript">
<!--
function showLayer(name) {
name.style.visibility = "visible";
}

function hideLayer(name) {
name.style.visibility = "hidden";
}
// -->
</SCRIPT>

Example click <span onclick="showLayer(thisone)" style="cursor:hand"><b>here</b></span>
<DIV id="thisone" style="position: absolute; top:100; left:10; visibility:hidden">Some text or other stuff
<P><a href="#null" onclick="alert('Hi There');hideLayer(thisone)">Click Me</a>
</DIV>
icuryy
10-25-2002, 09:37 PM
Wow, amazing!!!!!
Thank you very much for your help! I really appreciate the code from both of ya'll !!!!
Thanks again...