Probleem met script

[jochemmmm]

Ik heb een script voor uitklappen:

In header:

<style type="text/css">
#tekst {
display: none;
width: 250px;
border: 1px solid black;
background-color: #cccccc;
padding: 5px;
font-size: 12px;
}
</style>


<script type="text/javascript">
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display= "block";
}
return false;
} else {
return true;
}
}
</script>

En dan klapt hij dit dus uit:

<a href="#" onclick="return kadabra('tekst');"> <h2>#</h2></a>
<p id="tekst">
Voorbeeld # <br>
Voorbeeld #2 <br>
</p>

<a href="#" onclick="return kadabra('tekst');"> <h2>A</h2></a>
<p id="tekst">
Avenged Sevenfold <br>
Voorbeeld A
Voorbeeld A2 <br>
</p>

Zo gaat het nog door t/m 'Z'
Maar wat het probleem nu is, als ik op '#' klik klapt hij hem mooi uit. Als ik dan nog een keer klikt klapt hij weer mooi in :-({|= Maar als ik dan op 'A' of een hele andere letter klik, klapt hij nog steeds de eerste ('#' dus) open =.='
Iemand een idee hoe dit op te lossen?

Thanks,

 

[That Guy]

een id mag maar 1x voorkomen op een pagina, dat is het hele idee (flauw): een identifier. Ofwel, de 2e keer 'tekst' moet wat anders worden. Bijvoorbeeld:

<a href="#" onclick="return kadabra('tekstA');"> <h2>A</h2></a>
<p id="tekstA">

\m/ a7x

 

[jochemmmm]

okey, als ik nu mijn pagina open staan al die uitklapdingen al uitgeklapt. Terwijl ze pas moeten uitklappen als je erop klikt..

 

[That Guy]

Je CSS regel is #tekst, oftewel het element met ID 'tekst'. Dit is dus alleen de eerste! Het makkelijkste is om er een class aan te hangen:

/* CSS */

.onzichtbaar
{
   display: none;

   width: 250px;
   border: 1px solid black;
   background-color: #cccccc;
   padding: 5px;
   font-size: 12px;
}

de HTML wordt dan:

<a href="#" onclick="return kadabra('tekstnum');"> <h2>#</h2></a>
<p id="tekstnum" class='onzichtbaar'>
Voorbeeld # <br>
Voorbeeld #2 <br>
</p>

<a href="#" onclick="return kadabra('tekstA');"> <h2>A</h2></a>
<p id="tekstA" class='onzichtbaar'>
Avenged Sevenfold <br>
Voorbeeld A
Voorbeeld A2 <br>
</p>

de JS kan trouwens gewoon zo:
[JS]function kadabra(bbq)
{
var elem = document.getElementById(bbq);

elem.style.display = (elem.style.display == 'block') ? 'none' : 'block';
}[/JS]

 

[jochemmmm]

Dankje! Het werkt =]