Vastauksia voi saada näkyville klikkaamalla kysymyksiä. Vastauksen voi saada piiloon vaihtamalla kysymystä tai klikkaamalla vastausta.

Tulos

Aluksi piilottamalla elementit jotka sisältävät vastaukset ja sitten esittämällä asianmukainen elementti käyttäjän toimesta.

Kaikkiin elementteihin voidaan yhdistää tyylejä. Edelleen, kaikkia dokumentin runkoon kuuluvia elementtejä voidaan käyttää. Esimerkin vuoksi lykätään tähän vaikka seuraava kuva:

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
//<![CDATA[
var NeDIVit = ['yyy','kaa','koo'];
function Piilota() {
  for (var i=0;i<NeDIVit.length;i++) {
   document.getElementById(NeDIVit[i]).style.display = 'none';
 }
}
function Nayta(div) {
 Piilota();
  if (document.getElementById(div).style.display = '') {
  return false;
 }
 else {
 return true;
 }
}
window.onload=Piilota;
//]]>
</script>

Tämä tulee BODY-osastoon

<ul>
 <li
 onclick="return Nayta('yyy');">
 Miten tämä toimii?</li>
 <li
 onclick="return Nayta('kaa');">
 Voiko vastauksien ulkoasuun vaikuttaa?</li>
 <li
 onclick="return Nayta('koo');">
 Millä minä surffaan?</li>
</ul>

<div
 id="yyy"
 onclick="Piilota()">
<p>Aluksi piilottamalla elementit jotka
 sisältävät vastaukset ja sitten esittämällä
 asianmukainen elementti käyttäjän toimesta.</p>
</div>

<div
 id="kaa"
 onclick="Piilota()"
 style="border:3px double green;text-align:center">
<p>Kaikkiin elementteihin voidaan yhdistää tyylejä.
 Edelleen, kaikkia dokumentin runkoon kuuluvia
 elementtejä voidaan käyttää. Esimerkin vuoksi
 lykätään tähän vaikka seuraava kuva: <img
 src="../../../images/arac.gif" alt="" /></p>
</div>

<div
 id="koo"
 onclick="Piilota()">
<script type="text/javascript">
//<![CDATA[
document.write('<p>Ilmoittaa olevansa ' +
navigator.appName + '.</p>')
//]]>
</script>
</div>

Tämä sivu kuuluu vaikeimpiin JavaScript-esimerkkeihin.

Weppipakin kotisivulle