in- en uitklappen van tekst

[merlijn16]

mijn bedoeling is om in de xhtml pagina een aantal vragen met antwoorden te plaatsen. Klikt men op de vraag dan pas komt het antwoord eronder te staan.
Het wil me maar niet lukken om meerdere vragen met antwoorden te plaatsen. Plaats ik 1 vraag met antwoord dan werkt het perfect.
Bij aanklikken van vraag 2 opent het antwoord van vraag 1 op de plaats waar het bij vraag 1staat.

Heeft iemand een idee wat ik moet aanpassen in de code?

deze code staat in de css

#tekst {
display: none;
width: 250px;
border: 1px solid black;
background-color: #f5f5f5;
padding: 5px;
font-size: 12px;
}

deze in de head van de xhtml pagina

<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 deze code staat in de body

<p><a href="#" onclick="return kadabra('tekst');">
Vraag 1: .....</a>
</p>
<p id="tekst">
Antwoord: blablabla....
</p>


<p><a href="#" onclick="return kadabra('tekst');">
Vraag 2: .....</a>
</p>
<p id="tekst">
Antwoord: blablabla....
</p>

Mijn bedoeling is dat na aanklikken van een vraag, het antwoord netjes eronder verschijnt.
Ik hoop dat iemand weet hoe ik dit kan maken.

 

[That Guy]

Dat komt omdat je een dubbel ID hebt, en dat kan niet. ID is uniek. Als je de ID van je 2e p-element veranderd, en de onclick ook, werkt ie.



Overgens, verander de functie naar dit: korter, beter, netter, etcetera.
[JS]function klap(id)
{
var o = document.getElementById(id).style;

o.display = (o.display == 'block') ? 'none' : 'block';
}[/JS]je HTML wordt dan zo:

<p>
   <a href="#" onclick="klap('antwoord1');">
      Vraag 1: .....
   </a>
</p>
<p id="antwoord1">
   Antwoord1: blablabla....
</p>

<p>
   <a href="#" onclick="klap('antwoord2');">
      Vraag 2: .....
   </a>
</p>
<p id="antwoord2">
   Antwoord2: blablabla....
</p>

 

[merlijn16]

bedankt, het werkt bijna perfect.
Als ik de pagina open zijn de antwoorden al zichtbaar. Als ik op vraag klik gaan ze weg.
Zijn dus in het begin niet verborgen.

En de opmaak uit de css werkt nu niet.

 

[That Guy]

Ah, maar dat komt omdat je een id selector gebruikt: de #.

Doe zoiets:

/* css */

p.antwoord {
   display: none;
   /* meer */
}

<p>
   <a href="#" onclick="klap('antwoord1');">
      Vraag 1: .....
   </a>
</p>
<p id="antwoord1" class='antwoord'>
   Antwoord1: blablabla....
</p>
 
<p>
   <a href="#" onclick="klap('antwoord2');">
      Vraag 2: .....
   </a>
</p>
<p id="antwoord2" class='antwoord'>
   Antwoord2: blablabla....
</p>

 

[merlijn16]

Bedankt Vegras, het werkt perfect.
Heb nog een vraag over het veranderen van de border kleur. Er staat nu het woord "black" in de css, nu heb ik in mijn website veel deze kleur gebruikt #003300 (groen)
Zou graag deze kleur groen #003300 als borderkleur willen instellen. Is dat mogelijk? of heb ik enkel de keuze uit de woorden "green" en "darkgreen"?

 

[That Guy]

In css mag je OF een naam opgeven, OF een hex-kleurcode. Zie eens http://www.w3schools.com/css/css_colornames.asp. Ofwel, beide onderstaande regels zijn 'correct':

/* css code */


   border-color: #003300;

   border-color: black;

let echter, op, met 'correct' bedoel ik hier dat ze in alle mainstream browsers werken. ECHTER, om maar te quoten:

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.

kortweg: wil je altijd veilig zijn, gebruik de hexcodes!


:thumb:

 

[merlijn16]

Vegras, ontzettend bedankt voor je hulp en tips.
Het is gelukt.
:thumb: