HTML/JavaScript: Ein- und Ausblenden von Bereichen

Eine Internetseite soll beispielsweise Fragen und Antworten liefern. Um die Übersicht zu verbessern, sollen nicht alle Antworten zu den Fragen automatisch angezeigt werden. Der Benutzer soll selbst entscheiden, zu welcher Frage die Antwort angezeigt werden soll.

Nach Klicken auf das Plus-Symbol soll die Antwort angezeigt werden. Ein Klick auf das Minus-Symbol blendet die Antwort wieder aus.

Beispiel zum Ausprobieren:

Frage 1

Frage 2

Erreicht wird das mit Hilfe von zwei div-Blöcken, die über einfache JavaScript Funktionen angezeigt ("display:block") werden oder nicht ("display:none"). Im ersten div-Block wird das Plus-Symbol und die Frage angezeigt. Der zweite div-Block ist ausgeblendet und enthält das Minus-Symbol, die Frage und die Antwort.

Erster div-Block:

<div id="id1_frage" style="display:block"><img src="/bilder/plus.png" onclick="javascript:viewArea('id1')"> <b>Frage 1</b><br></div>

Zweiter div-Block:

<div id="id1_antwort" style="display:none"><img src="/bilder/minus.png" onclick="javascript:hideArea('id1')"> <b>Frage 1</b>

Antwort 1
Hier kann beliebiger Text eingefügt werden.

</div>

Zum Ein- und Ausblenden werden noch zwei JavaScript Funktionen benötigt:

<script>
function viewArea(strID)
{
document.getElementById(strID+'_frage').style.display='none';
document.getElementById(strID+'_antwort').style.display='block';
}
function hideArea(strID)
{
document.getElementById(strID+'_frage').style.display='block';
document.getElementById(strID+'_antwort').style.display='none';
}
</script>

Üblicherweise packt man die JavaScript Funktionen in den head Bereich einer HTML Seite (eingebettet in script-Tags)
Die Funktion viewArea() blendet den ersten div-Block aus und den zweiten div-Block ein
Die Funktion hideArea() blendet den zweiten div-Block aus und den erste div-Block ein
Die id-Namen der div-Blöcke sind willkürlich gewählt. Die id im ersten div-Block wird mit _frage ergänzt, die id im zweiten div-Block mit _antwort. Bei konsequenter Namensvergabe können die JavaScript Funktionen einfach gehalten werden. Diese werden nur mit dem ersten Teil der id (hier: id1, id2, ...) aufgerufen. _frage bzw. _antwort werden automatisch ergänzt

Vollständigkeitshalber hier noch der HTML Code der zweiten Frage:

<div id="id2_frage" style="display:block"><img src="/bilder/plus.png" onclick="javascript:viewArea('id2')"> <b>Frage 2</b><br></div>
<div id="id2_antwort" style="display:none"><img src="/bilder/minus.png" onclick="javascript:hideArea('id2')"> <b>Frage 2</b>

Antwort 2
Hier kann beliebiger Text eingefügt werden.

</div>