[JavaScript] Toggle-script
Door Peter Somhorst, 22 jaar geleden, 7.866x bekeken
Er zijn veel mensen op zoek naar een makkelijk script om layers (div, span, etc) te verbergen of weer te laten zien. Daarnaast is er nog verschil tussen display en visibility. Met dit script kun je zowel de visibility als de siaply aanpassen.
Om het script aan te roepen doe je simpelweg (bijv):
onClick="toggle('layer','kind','task')"
Layer is de ID van de te verbergen/showen layer.
Kind is ofwel 'visibility' ofwel 'display', je geeft dus aan welke van de twee je aan wil passen.
Task is ofwel 'show' (= je laat hem zien), 'hide' (= verbergt hem) of '' (= als hij is verborgen, laat je hem zien en andersom).
That's all fokes!
Voorbeeld: http://peter.somhorst.net/toggle.php
Gesponsorde koppelingen
PHP script bestanden
Er zijn 17 reacties op 'Javascript togglescript'
0 
-0 
-0
ziet er goed uit!
btw:
code tag's en inspringen zou wel overzichtelijker zijn!
btw:
code tag's en inspringen zou wel overzichtelijker zijn!
0 -0
-0
Nice script. Misschien ook leuk om de HTML code erachter erbij te vermelden :).
0 -0
-0
@harmen:
inspringen zit er ook in...?? code tags = ??
@bas:
aangezien er niet één toepassing is voor dit script zijn is er een legio aan html-voorbeelden te bedenken. Daarom heb ik in de uitleg maar even iets gemaakt waarmee je 'et zelf maar uit moet zoeken ;-) maar hier is de html-code van het voorbeeld:
inspringen zit er ook in...?? code tags = ??
@bas:
aangezien er niet één toepassing is voor dit script zijn is er een legio aan html-voorbeelden te bedenken. Daarom heb ik in de uitleg maar even iets gemaakt waarmee je 'et zelf maar uit moet zoeken ;-) maar hier is de html-code van het voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div style="background-color:blue;display:none;border:2px solid black;position:absolute;top:10px;left:150px;width:100px;height:100px;" id="vlak1"></div>
<span style="display:block;" onClick="toggle('vlak1','display','show')"><a href="#">Laat de div zien!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','hide')"><a href="#">Haal div weg!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','')"><a href="#">Let's toggle!</a></span>
<br><br><br>
<span>Even grappig! </span>
<span id="tekst1" style="font-size:20px;color:red;"> - Tekst - </span>
<span>En gewoon weer verder!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','show')"><a href="#">Laat de tekst zien!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','hide')"><a href="#">Haal de tekst weg!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','')"><a href="#">Let's toggle</span>
<span style="display:block;" onClick="toggle('vlak1','display','show')"><a href="#">Laat de div zien!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','hide')"><a href="#">Haal div weg!</a></span>
<span style="display:block;" onClick="toggle('vlak1','display','')"><a href="#">Let's toggle!</a></span>
<br><br><br>
<span>Even grappig! </span>
<span id="tekst1" style="font-size:20px;color:red;"> - Tekst - </span>
<span>En gewoon weer verder!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','show')"><a href="#">Laat de tekst zien!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','hide')"><a href="#">Haal de tekst weg!</span>
<span style="display:block;" onClick="toggle('tekst1','visibility','')"><a href="#">Let's toggle</span>
0 -0
-0
dat is best wel handig, en kan ik waarschijnlijk we gebruiken eens zien waar ik het kan invoegen maar goed werk hoor :D
0 -0
-0
Dit is inderdaad zeer handig... Kan ik bv ook bij me phpforum zo forums kunnen laten weghalen wanneer mensen die bv die niet willen zien... zoals bij GOT :)
0 -0
-0
Kan je het ook zo maken dat je met je muis over een link gaat en dat hij dan verdwijnt over veschijnt? Mouseover dacht ik ofzo?
0 -0
-0
@vincent:
onMouseOver="toggle('layer','kind','task')" onMouseOut="toggle('layer','kind','task')"
Die combinatie;)
onMouseOver="toggle('layer','kind','task')" onMouseOut="toggle('layer','kind','task')"
Die combinatie;)
0 -0
-0
Ik vind het een beetje overdreven. zoiets vind ik makkelijker.
Of is er een verschil tussen visibility en display? Laat de een het opschuiven en de ander niet ofzo? Wat is er aan de code die je hebt gemaakt handiger?
Of is er een verschil tussen visibility en display? Laat de een het opschuiven en de ander niet ofzo? Wat is er aan de code die je hebt gemaakt handiger?
0 -0
-0
Verschil tussen display en visibility is dat bij display het element echt gewoon niet in de pagina te zien is, niet qua afmetingen of witruimte. Met visibility is het er wel, maar onzichtbaar. Het neemt dus wel vast zijn ruimte in.
Verschil tussen jouw scriptje en dit ding is dat deze nog support biedt voor Netscape 4... ik denk dat je die tegenwoordig niet echt meer hoeft te ondersteunen.
Verschil tussen jouw scriptje en dit ding is dat deze nog support biedt voor Netscape 4... ik denk dat je die tegenwoordig niet echt meer hoeft te ondersteunen.
0 -0
-0
Ik heb dit script zo algemeen mogelijk gemaakt. Ik had eerst een script dat het deed in IE, maar in FF kuren had. Ik heb dus alle mogelijke manieren de layer te benoemen genomen en gebruikt.
@boris:
Visibility: wel ruimte in laten nemen als hij verborgen is
Display: geen ruimte in laten nemen bij verborgen
Ik heb ze allebei gebruikt om het script weer zo algemeen mogelijk te maken...
@boris:
Visibility: wel ruimte in laten nemen als hij verborgen is
Display: geen ruimte in laten nemen bij verborgen
Ik heb ze allebei gebruikt om het script weer zo algemeen mogelijk te maken...
0 -0
-0
Je doet gewoon in elke link:
Code (php)
1
2
3
2
3
<?
<a onclick="toggle('je_layer_die_je_wilt_laten_zien','display','show');toggle('je_layer_die_je__niet_wilt_laten_zien','display','hide');toggle('je_layer_die_je__ook_niet_wilt_laten_zien','display','hide');" >
?>
<a onclick="toggle('je_layer_die_je_wilt_laten_zien','display','show');toggle('je_layer_die_je__niet_wilt_laten_zien','display','hide');toggle('je_layer_die_je__ook_niet_wilt_laten_zien','display','hide');" >
?>
0 -0
-0
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
div.iets {
display: none;
}
</style>
<script type="text/javascript">
function klik (did,did2,did3) {
if (document.getElementById(did).style.display == 'none')
{
toggle(did,'display','show');
toggle(did2,'display','hide');
toggle(did3,'display','hide');
}
else
{
toggle(did,'display','hide');
toggle(did2,'display','hide');
toggle(did3,'display','hide');
}
}
function toggle(layer,kind,task) {
if (kind=="visibility"){
if (task=="hide")
vis_to = "hidden";
else if (task=="show")
vis_to = "visible";
else {
if (document.layers)
vis_to = (document.layers[layer].visibility=="hide") ? "show" : "hide";
else if (document.all)
vis_to = (document.all[layer].style.visibility=="hidden") ? "visible" : "hidden";
else if (document.getElementById)
vis_to = (document.getElementById(layer).style.visibility=="hidden") ? "visible" : "hidden";
}
} else if (kind=="display"){
if (task=="hide")
dis_to = "none";
else if (task=="show")
dis_to = "block";
else {
if (document.layers)
dis_to = (document.layers[layer].display=="none") ? "block" : "none";
else if (document.all)
dis_to = (document.all[layer].style.display=="none") ? "block" : "none";
else if (document.getElementById)
dis_to = (document.getElementById(layer).style.display=="none") ? "block" : "none";
}
}
if (document.layers)
(kind=="display") ? document.layers[layer].display = dis_to : document.layers[layer].visibility = vis_to;
else if (document.all)
(kind=="display") ? document.all[layer].style.display = dis_to : document.all[layer].style.visibility = vis_to;
else if (document.getElementById)
(kind=="display") ? document.getElementById(layer).style.display = dis_to : document.getElementById(layer).style.visibility = vis_to;
}
</script>
</head>
<body>
<div class="links">
<a onclick="klik('diveen','divtwee','divdrie');">1</a>
<a onclick="klik('divtwee','diveen','divdrie');">2</a>
<a onclick="klik('divdrie','diveen','divtwee');">3</a>
</div>
<div class="iets" id="diveen">
:-)een
</div>
<div class="iets" id="divtwee">
twee
</div>
<div class="iets" id="divdrie">
drie
</div>
</body>
</html>
<html>
<head>
<title>blabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
div.iets {
display: none;
}
</style>
<script type="text/javascript">
function klik (did,did2,did3) {
if (document.getElementById(did).style.display == 'none')
{
toggle(did,'display','show');
toggle(did2,'display','hide');
toggle(did3,'display','hide');
}
else
{
toggle(did,'display','hide');
toggle(did2,'display','hide');
toggle(did3,'display','hide');
}
}
function toggle(layer,kind,task) {
if (kind=="visibility"){
if (task=="hide")
vis_to = "hidden";
else if (task=="show")
vis_to = "visible";
else {
if (document.layers)
vis_to = (document.layers[layer].visibility=="hide") ? "show" : "hide";
else if (document.all)
vis_to = (document.all[layer].style.visibility=="hidden") ? "visible" : "hidden";
else if (document.getElementById)
vis_to = (document.getElementById(layer).style.visibility=="hidden") ? "visible" : "hidden";
}
} else if (kind=="display"){
if (task=="hide")
dis_to = "none";
else if (task=="show")
dis_to = "block";
else {
if (document.layers)
dis_to = (document.layers[layer].display=="none") ? "block" : "none";
else if (document.all)
dis_to = (document.all[layer].style.display=="none") ? "block" : "none";
else if (document.getElementById)
dis_to = (document.getElementById(layer).style.display=="none") ? "block" : "none";
}
}
if (document.layers)
(kind=="display") ? document.layers[layer].display = dis_to : document.layers[layer].visibility = vis_to;
else if (document.all)
(kind=="display") ? document.all[layer].style.display = dis_to : document.all[layer].style.visibility = vis_to;
else if (document.getElementById)
(kind=="display") ? document.getElementById(layer).style.display = dis_to : document.getElementById(layer).style.visibility = vis_to;
}
</script>
</head>
<body>
<div class="links">
<a onclick="klik('diveen','divtwee','divdrie');">1</a>
<a onclick="klik('divtwee','diveen','divdrie');">2</a>
<a onclick="klik('divdrie','diveen','divtwee');">3</a>
</div>
<div class="iets" id="diveen">
:-)een
</div>
<div class="iets" id="divtwee">
twee
</div>
<div class="iets" id="divdrie">
drie
</div>
</body>
</html>
Hier, zoals ik al zei. Test maar. Het is valid.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu