spoiler wilt niet openen

Door Jyy An op 23-01-2012 18:18

1.418 views

Hallo allemaal (:

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

<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>

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!

Jens erd

23-01-2012 18:34


document.getElementsByName('spgroup1').style.display = 'none';
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?

Jyy An

23-01-2012 20:53

Dat er ook andere spoilers zijn met de naam spgroup1 maar de id uniek is. Ik wil dat elke spoiler met naam "spgroup1" op none staat, op die ene (met id spoiler0) na.

Wouter J

23-01-2012 21:57

Haal als je blieft eerst even die inline JS en CSS weg, de code wordt dan iets als:

<!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>

Meteen de code even verbeterd, ik kan niet garanderen dat het werkt maar is in elk geval een stuk beter.

Jyy An

23-01-2012 22:04

Dat gaat helaas niet gezien mijn php-code die dit construeert... Daarnaast ben ik sowieso eerder benieuwd naar wat er fout is, dan naar een kloppende code te krijgen..

Wouter J

24-01-2012 08:51

Ook dit kun je met PHP genereren...

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:

var elems = document.getElementsByName('spgroup0');
for( i=0, len = elems.length; i < len; i++ ) {
  elems[i].style.display = 'none';
}

Jyy An

24-01-2012 17:34

Wouter, sorry, maar volgens mij begrijp je mijn vraag niet zo goed.Ik ben hier niet voor les in PHP of javascript, ik wil alleen weten wat er mis is met mijn code, waarom hij niet werkt.
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.

Wouter J

24-01-2012 17:39 gewijzigd op 24-01-2012 17:40

@Jyy An, volgens mij beantwoord ik ook telkens je vraag. Wat is fout is is dit:

- Je haalt alle elementen op met name="spgroup0" [size=xsmall](name attribute is oud, je kan beter class attribuut gebruiken)[/size]. 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:

Jyy An

24-01-2012 18:03

Ahh, of course, thanks, daar had ik even overheen gelezen. Thanks, weer wat geleerd!

Reageren

Inloggen om te reageren