spoiler wilt niet openen
Hieronder een voorbeeldcode uit mijn spoiler-BBCode (zie ook hier), hij werkt alleen niet. Ik wil dat de spoilers die tot die spoilergroup behoren sluiten als ik de volgende open, zodat er altijd maar 1tje van die group geopend is.
Nu gaat hij zelf niet meer open ;s
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;">
<span onclick="if (document.getElementById('spoiler0').style.display == 'none') {
document.getElementsByName('spgroup1').style.display = 'none';
document.getElementById('spoiler0').style.display = 'block';
} else {
document.getElementsByName('spgroup1').style.display = 'none';
}" /><a href="#" onclick="return false;">Lees meer...</a></span></div><div id="spoiler0" name="spgroup1" style="display: none;">Blabla voorbeeldtekst.</div>
<span onclick="if (document.getElementById('spoiler0').style.display == 'none') {
document.getElementsByName('spgroup1').style.display = 'none';
document.getElementById('spoiler0').style.display = 'block';
} else {
document.getElementsByName('spgroup1').style.display = 'none';
}" /><a href="#" onclick="return false;">Lees meer...</a></span></div><div id="spoiler0" name="spgroup1" style="display: none;">Blabla voorbeeldtekst.</div>
Ik vermoed dat de document.getElementsByName('spgroup1').style.display = 'none'; nog niet klaar is als hij begint met document.getElementById('spoiler0').style.display = 'block'; en dat hij daarom altijd op none blijft staan...
Iemand? Thanks in advance!
Quote:
Code (php)
1
2
2
document.getElementsByName('spgroup1').style.display = 'none';
document.getElementById('spoiler0').style.display = 'block';
document.getElementById('spoiler0').style.display = 'block';
Je gooit hem eerst op none, om vervolgens dezelfde div weer op block te gooien? wat is daar de logica achter?
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
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
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style>
#een-id
{
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
}
.hide { display: none; }
.show { display: block; }
</style>
</head>
<body>
<!-- andere html code -->
<div id="een-id">
<a href="#" onclick="onclick="toggleSpoiler(); return false;">Lees meer...</a>
</div>
<div id="spoiler0" name="spgroup1" class="hide">Blabla voorbeeldtekst.</div>
<script>
function toggleSpoiler() {
var spoiler0 = document.getElementById('spoiler0'),
spgroup1 = document.getElementsByName('spgroup1');
if ( spoiler0.className.match(/hide/) ) {
spgroup1.className += spgroup1.className.replace(/hide/, show);
spoiler0.className += spoiler0.className.replace(/show/, hide);
} else {
spgroup1.className += spgroup1.className.replace(/show/, hide);
}
}
</script>
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style>
#een-id
{
text-transform: uppercase;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 3px;
font-size: 0.8em;
font-weight: bold;
display: block;
}
.hide { display: none; }
.show { display: block; }
</style>
</head>
<body>
<!-- andere html code -->
<div id="een-id">
<a href="#" onclick="onclick="toggleSpoiler(); return false;">Lees meer...</a>
</div>
<div id="spoiler0" name="spgroup1" class="hide">Blabla voorbeeldtekst.</div>
<script>
function toggleSpoiler() {
var spoiler0 = document.getElementById('spoiler0'),
spgroup1 = document.getElementsByName('spgroup1');
if ( spoiler0.className.match(/hide/) ) {
spgroup1.className += spgroup1.className.replace(/hide/, show);
spoiler0.className += spoiler0.className.replace(/show/, hide);
} else {
spgroup1.className += spgroup1.className.replace(/show/, hide);
}
}
</script>
</body>
</html>
Meteen de code even verbeterd, ik kan niet garanderen dat het werkt maar is in elk geval een stuk beter.
Dan even over je script:
- Je haalt meerdere keren document.getElementById('spoiler0') op of document.getElementsByName('spgroup1'). Dat kost allemaal tijd, beter is het om dit 1 keer op te halen en dat het element in een variabele te stoppen en die variabele te gebruiken.
- Je haalt alle elementen op met name="spgroup0" (name attribute is oud, je kan beter class attribuut gebruiken). Je krijgt dan een array met al deze elementen terug. Je moet dus met een for loop door de array lopen en elk element style="display: none;" meegeven:
Code (php)
1
2
3
4
2
3
4
var elems = document.getElementsByName('spgroup0');
for( i=0, len = elems.length; i < len; i++ ) {
elems[i].style.display = 'none';
}
for( i=0, len = elems.length; i < len; i++ ) {
elems[i].style.display = 'none';
}
Verder werkt de getElementsByClass niet op elke browser, en werkt mijn code prima op dat ene block foutje na, en ik wil graag weten hoe ik dit opgelost krijg. Ik he ook al verschillende dingen geprobeerd (zelfs met een var t=setTimeOut()) maar ik weet niet hoe ik dit op moet lossen, ook omdat ik niet weet wat het probleem is.
Quote:
- Je haalt alle elementen op met name="spgroup0" (name attribute is oud, je kan beter class attribuut gebruiken). Je krijgt dan een array met al deze elementen terug. Je moet dus met een for loop door de array lopen en elk element style="display: none;" meegeven:
Gewijzigd op 24/01/2012 17:40:27 door Wouter J