jomo.org

Der HTML-Bereich
Im HTML-Bereich werden jeweils Titel des Berichts, Vorspann und Textblock aneinandergereiht. Nach dem Vorspann wird ein Hyperlink auf das Wort mehr gesetzt und mit dem Event onClick wird die function text_ein(i) ausgelöst.
<h2>Thema 1</h2>
<p>Vorspann 1<br />
<a href=”#” onClick=”text_ein(1);”> mehr </a>
</p>
<span id=”detail1″>
<p>Das ist der erste Text, der Details zum ersten Thema angibt.</p>
</span>

<h2>Thema 2</h2>
<p>Vorspann 2<br />
<a href=”#” onClick=”text_ein(2);”> mehr </a>
</p>
<span id=”detail2″>
<p>Das ist der zweite Text, der Details … angibt.</p>
</span>
Damit die Detail-Textblöcke anfangs ausgeblendet sind, wird im Stylesheet die Eigenschaft der Identiteisw auf display:none gesetzt:
#detail1, #detail2, #detail3 { display:none; }
Mit Hilfe der Identies zeigt die function text_ein(i) den entsprechenden Detail-Textblock:
<script language=”javascript”>
function text_ein(i) {
document.getElementById(”detail”+i).style.display = “block”;
}
</script>
Dieser Code muss noch verfeinert werden:

• Der Link mehr soll verschwinden, wenn der Detailbereich angezigt wird.
• Ein Link Detail verstecken soll angezeigt werden und die function text_aus(i) aufrufen.

Dazu wird auf den Link mehr eine Identity gesetzt und am Ende des Detail-Bereichs wird jeweils ein Link Detail verstecken eingefügt. Der HTML-Bereich sieht dann folgendermaßen aus:
<h2>Thema 1</h2>
<p>Vorspann 1<br />
<span id=”zeigen1″>
<a href=”#” onClick=”text_ein(1);”> mehr </a>
</span>
</p>
<span id=”detail1″>
<p>Das ist der erste Text, der Details zum ersten Thema angibt.
<br />
<a href=”#” onClick=”text_aus(1);”> Detail verstecken </a>
</p>
</span>

<h2>Thema 2</h2>
<p>Vorspann 2<br />
<span id=”zeigen2″>
<a href=”#” onClick=”text_ein(2);”> mehr </a>
</span>
</p>
<span id=”detail2″>
<p>Das ist der zweite Text, der Details … angibt.
<br />
<a href=”#” onClick=”text_aus(2);”> Detail verstecken </a>
</p>
</span>
Der Link auf Detail verstecken wird im Detail-Span gesetzt und erscheint und verschwindet dadurch mit dem Detailtext.

Der JavaScript-Bereich wird zweifach ergänzt:

• Die function text_ein(i) wird um das Ausblenden des Hyperlinks auf mehr ergänzt.
• Die function text_aus(i) wird analog zur function text_ein(i) gebildet.

<script language=”javascript”>
function text_ein(i) {
document.getElementById(”detail”+i).style.display = “block”;
document.getElementById(”zeigen”+i).style.display = “none”;
}

function text_aus(i) {
document.getElementById(”detail”+i).style.display = “none”;
document.getElementById(”zeigen”+i).style.display = “block”;
}
</script>
Hinweis: Hier wird jeder Text einzeln ausgeblendet, mehrere Details können gleichzeitig geöffnet sein. Soll nur ein einziger Text offen sein, müssen in einer for-Schleife in der function text_ein(i) zuerst alle Detailbereiche ausgeblendet werden:
<script language=”javascript”>
var n = 2 // Anzahl der Textblöcke
function text_ein(i) {
text_aus(i)
document.getElementById(”detail”+i).style.display = “block”;
document.getElementById(”zeigen”+i).style.display = “none”;
}

function text_aus(i) {
for (var j=1;j<=n;j++) {
document.getElementById(”detail”+j).style.display = “none”;
document.getElementById(”zeigen”+j).style.display = “block”;
}
}
</script>
Beim Zeigen eines Detailbereiches werden automatisch alle Detailbereiche vorher geschlossen. Genau genommen würde auch die Variable i in der function text_aus() nicht mehr benötigt.