RE: Can I make it look cooler?

by Francois de Beer <fbeer(at)sars.gov.za>

Date:	Tue, 1 Feb 2000 14:02:02 +0200
To:	newmarker.1(at)osu.edu, hwg-techniques(at)mail.hwg.org
	todo: View Thread, Original

I wrote Something Like this a while ago for our Intranet Site: (Not tested
but this is what it boils down to:)
Should work in IE4... 
Renders Like This:

Opt1
Opt2
Opt3

If you click on Opt2 it renders like this: (note that Opt3 Moves downwards
by itself)

Opt1
Opt2
	* Opt2 Text
	* Opt2 Text
	* Opt2 Text
Opt3

<html>
<head>
<title>Options</title>

<script language="VBScript">
<!--
function DoDispl(Option1)
	if Option1.style.display = "none" then 	'If user clicked and not
visible
		Option1.style.display = "" 		'Make Visible
	else 
		Option1.style.display = "none" 	'Make Invisible
	end if
end function
-->
</script>
</head>

<body>
<div style="cursor:hand" onclick="DoDispl(Opt1)">
	<p>Opt1</p>
</div>
<div id="Opt1" style="display:none">
	<ul>
	  <li>Opt1 Text</li>
	  <li>Opt1 Text</li>
	  <li>Opt1 Text</li>
	</ul>
</div>
<div style="cursor:hand" onclick="DoDispl(Opt2)">
	<p>Opt2</p>
</div>
<div id="Opt2" style="display:none">
	<ul>
	  <li>Opt2 Text</li>
	  <li>Opt2 Text</li>
	  <li>Opt2 Text</li>
	</ul>
</div>
<div style="cursor:hand" onclick="DoDispl(Opt3)">
	<p>Opt3</p>
</div>
<div id="Opt3" style="display:none">
	<ul>
	  <li>Opt3 Text</li>
	  <li>Opt3 Text</li>
	  <li>Opt3 Text</li>
	</ul>
</div>
</body>
</html>

HTH
Beer

HWG hwg-techniques mailing list archives, maintained by Web Professional Association - IWA

This page is part of a preserved archive of archives.hwg.org. The site is no longer active and its content is not maintained. For enquiries about this archive, write to archive(at)iwanet.org.