Met Javascript een Toggle maken

Status
Niet open voor verdere reacties.
L

Lijperik

Nieuwe gebruiker
Lid geworden
24 feb 2007
Berichten
4
Ik vond op het internet ergens een scriptje en heb het een beetje aangepast en alles is aardig gelukt, maar nou wou ik 1 ding veranderen en het lukt me niet echt:confused:

Dit is het script tot nu toe:
HTML: 
<html>
<head>
<script language="javascript">

function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
   } else {
     obj.style.display="block";
   }
}



</script>
</head>
<style type="text/css">

<!--

.style6 {font-family: Verdana; font-size: 12px; color: #000000; }
a:link {color: #000000; text-decoration: none; }
a:visited {text-decoration: none; color: #000000; }
a:hover {text-decoration: underline; color: #000000; }
a:active {text-decoration: none; color: #000000; }
 
body {
width:95%;
}

-->

</style>
<body>

<table width="100%" border=0 cellspacing="0" cellpadding="0">
  <tr><td><b><a style="color: black; font-weight : bold;" id="xelp" href=javascript:Toggle('elp');><span class="style6">Open...</span></a></b></td></tr>
</table>

<div id="elp">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr><td><a href="#"><span class="style6">Optie 1</span></a></td></tr>
  <tr><td><a href="#"><span class="style6">Optie 2</span></a></td></tr>
  <tr><td><a href="#"><span class="style6">Optie 3</span></a></td></tr>
  <tr><td><a href="#"><span class="style6">Optie 4</span></a></td></tr>
  <tr><td><a href="#"><span class="style6">Optie 5</span></a></td></tr>
  <tr><td><a href="#"><span class="style6">Optie 6</span></a></td></tr>
</table>
</div>

</body>
</html>

Hier is de pagina er van:
http://chris.pro-studio.nl/toggle.php

Als je die pagina opent zie je als het goed is:
Open...
Optie 1
Optie 2
Optie 3
Optie 4
Optie 5
Optie 6

En als je op Open... drukt klapt alles naar binnen. Dat het naar binnen kan klappen en uit kan klappen is goed maar nou wou ik graag weten hoe ik er voor kan zorgen dat hij niet uitgeklapt opent als ik de pagina open. Dus hoe moet dat??
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript"> 
function Toggle(item) 
{
	obj = document.getElementById(item);
	visible = (obj.style.display!="none");
	key = document.getElementById("x" + item); 
	if(visible)
	{
		obj.style.display="none";
	}
	else
	{
		obj.style.display="block";
	}
}
</script>
</head>
<style type="text/css"> 
	.style6 {font-family: Verdana; font-size: 12px; color: #000000; }
	a:link {color: #000000; text-decoration: none; }
	a:visited {text-decoration: none; color: #000000; }
	a:hover {text-decoration: underline; color: #000000; }
	a:active {text-decoration: none; color: #000000; }
	body { width:95%; }
</style>
<body onload="javascript:Toggle('elp');">
<table width="100%" border=0 cellspacing="0" cellpadding="0">
	<tr>
		<td>
			<b>
				<a style="color: black; font-weight : bold;" id="xelp" href=javascript:Toggle('elp');>
					<span class="style6">Open...</span>
				</a>
			</b>
		</td>
	</tr>
</table>
<div id="elp">
	<table width="100%" border="0" cellspacing="0" cellpadding="0" >
		<tr>
			<td><a href="#"><span class="style6">Optie 1</span></a></td>
		</tr>
		<tr>
			<td><a href="#"><span class="style6">Optie 2</span></a></td>
		</tr>
		<tr>
			<td><a href="#"><span class="style6">Optie 3</span></a></td>
		</tr>
		<tr>
			<td><a href="#"><span class="style6">Optie 4</span></a></td>
		</tr>
		<tr>
			<td><a href="#"><span class="style6">Optie 5</span></a></td>
		</tr>
		<tr>
			<td><a href="#"><span class="style6">Optie 6</span></a></td>
		</tr>
	</table>
</div>
</body>
</html>

;)

Door in de tag <body> de Toggle('elp'); al aan te roepen sluit hij hem meteen.
(Voor de rest heb ik het script wat overzichtelijker [voor mij in ieder geval] gemaakt)
 
Ben ik weer :P

Ik heb nou meerdere toggle's en met 1 toggle weet ik dat je in de body kunt zetten dat hij hem moet sluiten.

Maar nou moet hij er 3 sluiten. Hoe doe ik dat?
 
Scheiden met een punt-komma:
PHP: 
<body onload="Toggle('elp'); Toggle('flp'); Toggle('glp');">
Je kunt ook
#elp { display: none;}
in de style zetten, of
<div id="elp" style="display: none;">
gebruiken.


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan