Dynamische lijst maken

Hezel · 10 okt 2007

Ik ben aan het proberen een faq te maken. Zodra er op de vraag wordt geklikt moet het antwoord gedisplayd worden. Het script werkt nu wel, alleen moet je in het begin 2x op de vraag klikken, anders toont hij hem niet. Zou iemand mij kunnen vertellen waar dit aan ligt? De code is als volgt (en wordt gegenereerd door een php script):

Code:

        <html><head><title></title>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
	<style type="text/css">
	<!--
	p#antwoord1 {display: none;}p#antwoord2 {display: none;}p#antwoord3 {display: none;}
	-->
	</style>
	
	<script language="JavaScript">
                function showantwoord ( show ) {
			var var_antwoord = 'antwoord' + show; 
                        if (document.getElementById(var_antwoord).style.display=='none')  {
                                document.getElementById(var_antwoord).style.display='block';
                        } else {
                                document.getElementById(var_antwoord).style.display='none';
                        }
                }
        </script>
        </head>
        <body>
<ul>
<li onClick="showantwoord(1)">Vraag1<p id="antwoord1">Antwoord1</p>
<li onClick="showantwoord(2)">Vraag2<p id="antwoord2">Antwoord2</p>
<li onClick="showantwoord(3)">Vraag3<p id="antwoord3">Antwoord3</p>
</body></html>

Ik ben nog niet zo lang bezig met javascript. Hulp wordt zeer gewaardeerd, alvast bedankt!

Egel · 11 okt 2007

Als je

PHP:

 if (document.getElementById(var_antwoord).style.display=='none')

verandert in

PHP:

 if (document.getElementById(var_antwoord).style.display!='block')

dan doet ie het.

Het lijkt in eerste instantie hetzelfde maar ~.style.display spreekt de style="..." in het element zelf aan

PHP:

<p id="antwoord3" style="display: none;">Antwoord3</p>

omdat die niet bestaat is die niet gelijk aan 'none' en ook niet aan 'block'.

Een style in het element werkt, of het kan dus zo:

PHP:

<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <style type="text/css">
   p#antwoord1 {display: none;}
   p#antwoord2 {display: none;}
   p#antwoord3 {display: none;}
  </style>
  <script type="text/javascript">
   function showantwoord(nr) {
    var obj = document.getElementById('antwoord' + nr); 
    obj.style.display = (obj.style.display != 'block' ? 'block' : 'none');
    };
  </script>
 </head>
 <body>
  <ul>
   <li onClick="showantwoord(1)">Vraag1<p id="antwoord1">Antwoord1</p>
   <li onClick="showantwoord(2)">Vraag2<p id="antwoord2">Antwoord2</p>
   <li onClick="showantwoord(3)">Vraag3<p id="antwoord3">Antwoord3</p>
  </ul>
 </body>
</html>

Ik was toevallig eergisteren hetzelfde tegengekomen.

http://www.helpmij.nl/forum/showpost.php?p=2089220&postcount=10

Vr.Gr. Egel.

Hezel · 11 okt 2007

Whoo echt super bedankt man! Haha, dat zou echt iets kunnen zijn waar ik lang op had kunnen zoeken.

Kudo's :love:

!

Dynamische lijst maken

Hezel

Nieuwe gebruiker

Egel

Terugkerende gebruiker

Hezel

Nieuwe gebruiker

Nieuwste berichten

Wij waarderen jouw privacy