login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Overige > Uitklapbare F.A.Q.

Uitklapbare F.A.Q.

Auteur: Maarten - 02 augustus 2006 - 19:28 - Gekeurd door: Gerard - Hits: 9497 - Aantal punten: 4.30 (5 stemmen)



Ik moest even een voorbeeldje maken van een uitklapbare F.A.Q., dus ik dacht dat iemand anders er misschien ook iets mee kon doen. Het is zeer simpel te gebruiken, de uitleg staat er tussen.

Je mag gerust alle opmerkingen in het script weghalen, dit is enkel installatie-uitleg 

Waarom je een F.A.Q. zou maken weet ik overigens niet, niemand leest die zooi.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!-- Vergeet <head>, <html>, <title>, <body> etc niet :) -->
  2.  
  3. <!--
  4. Standaard staan alle vragen open. Dit is voor de mensen die JavaScript uitgeschakeld hebben,
  5. zodat deze toch ook de antwoorden kunnen lezen. De mensen die wel javascript hebben,
  6. zien enkel de vragen (onderstaande functie verbergAlles() doet alle vragen dicht) zodat ze ze
  7. kunnen openklappen met antwoord().
  8.  
  9. Volgens de HTML/JavaScript conventies zet je die hele <script> zooi in de <head> tags, maar je kan dit evengoed in de body
  10. zetten.
  11. -->
  12. <script language="javascript" type="text/javascript">
  13. // Als men slechts 1 antwoord tegelijk mag zien, zet dit dan op false. Dan gaat het andere antwoord eerst terug weg voor het nieuwe er komt.
  14. var meerdereToegestaan = true;
  15.  
  16. function verbergAlles() {
  17.    for(i = 1; i < 9999999; i++) {
  18.       var antwoordDiv = document.getElementById('antwoord[' + i + ']');
  19.       if(!antwoordDiv) {
  20.           // Als we aan het eind van de antwoorden zijn, afbreken
  21.           return true;
  22.       } else {
  23.           // Het antwoord bestaat nog, verbergen dus
  24.           antwoordDiv.style.display = 'none';
  25.       }
  26.    }
  27. }
  28.  
  29. function antwoord(id) {
  30.     var antwoordDiv = document.getElementById('antwoord[' + id + ']');
  31.     // Het antwoord moet uiteraard bestaan
  32.     if(antwoordDiv) {
  33.         // Naargelang instelling verbergen
  34.         if(meerdereToegestaan == false) { verbergAlles(); }
  35.         if(antwoordDiv.style.display == 'none') {
  36.             // Het antwoord bestaat en is verborgen, toon het dus
  37.             antwoordDiv.style.display = 'block';
  38.         } else {
  39.             // Het antwoord is reeds zichtbaar, verbergen dus
  40.             antwoordDiv.style.display = 'none';
  41.         }
  42.     } else {
  43.         alert('Ongeldig antwoord...');
  44.     }
  45. }
  46. </script>
  47.  
  48. <!--
  49. Deze boodschap verschijnt bij mensen die JavaScript uitgeschakeld hebben.
  50. Je kan daar dus ook een link plaatsen naar een pagina met instructies, aangezien dit wel vereist
  51. zal zijn voor de website?
  52.  -->
  53.  
  54. <noscript>
  55. Voor een optimale weergave van deze F.A.Q. schakelt u best JavaScript in.
  56. </noscript>
  57.  
  58.  
  59. <!-- En dan nu de essentie van de zaak: de vragen en antwoorden. -->
  60. <ol>
  61.     <li>
  62.         <a href="javascript:antwoord(1);">Is MurfyMedia een prachtige naam?</a>
  63.         <div id="antwoord[1]">Zeer zeker. Mensen die anders beweren horen beschaamd te zijn.</div>
  64.     </li>
  65.     <li>
  66.         <a href="javascript:antwoord(2);">Werkt dit echt?</a>
  67.         <div id="antwoord[2]">Neen. Wat u hier ziet is een illusie. Wat dacht u zelf?</div>
  68.     </li>
  69.     <li>
  70.         <a href="javascript:antwoord(3);">Moet ik de antwoorden werkelijk onder iedere vraag zetten?</a>
  71.     </li>
  72.     <li>
  73.         <a href="javascript:antwoord(4);">Allemaal mooi en wel, maar hoe maak ik een vraag?</a>
  74.         <div id="antwoord[4]">Mooi is het zeker. Gemakkelijk ook: de vraag maak je zoals je in de broncode ziet, alleen zet je in  het href-attribuut &quot;javascript:antwoord( nummer van het antwoord )&quot;.<br />
  75.         Vervolgens plaats je rond het antwoord &lt;div id=&quot;antwoord[ zelfde nummer als in href attribuut ]&quot;&gt; en &lt;div&gt;. Let op de vierkante en ronde haakjes!!</div>
  76.     </li>
  77.     <li>
  78.         <a href="javascript:antwoord(1337);">Wat als ik antwoord( een nummer dat niet bestaat ) gebruik?</a>
  79.     </li>
  80. </ol>
  81.  
  82. <div id="antwoord[3]">Neen; dit is niet verplicht. Je kan deze div gelijk waar zetten :)</div>
  83.  
  84.  
  85. <!-- Dit moet helemaal onderaan!! -->
  86.  
  87. <script language="javascript" type="text/javascript">
  88. verbergAlles();
  89. </script>
  90. <!-- En afsluiten, met </body> en </html> uiteraard -->
  91.  
  92.  
  93. <!-- Graag gedaan - info@murfymedia.be -->
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (5)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.028s