Text sichtbar/unsichtbar

[Der Martin]

Hallo,

bisher hatte ich folgendes HTML.

<ul>  
   <li><a href="#id1">Abteilung1</a></li>  
   <li><a href="#id2">Abteilung2</a></li>  
   <li><a href="#id3">Abteilung3</a></li>  
   <li><a href="#id4">Abteilung4</a></li>  
</ul>  

<h1 id="id1">Abteilung1</h1>  
.........

<h1 id="id2">Abteilung2</h1>  
.........

<h1 id="id3">Abteilung3</h1>  
.........

<h1 id="id4">Abteilung4</h1>  
.........

also den gesamten Inhalt auf einer einzigen Seite.

Dabei konnte man durch Scrollen alles ansehen.
Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint.
Wie kann ich das realisieren?

Entweder "klassisch" durch Aufteilen in mehrere HTML-Dokumente und Verlinken des gesamten Dokuments. Dann brauchst du die IDs eventuell auch nicht mehr.

Oder mit CSS und der Pseudoklasse :target (Erklärung und Beispiel).

Live long and pros healthy,
 Martin