Wie meistens im Leben gibt es dafür verschiedene Lösungswege. :o)
Ich persönlich finde den Einsatz des mootools-Framework hier sehr schick.

SmartSlider

Ralf Hortt von horttcore.de hat, basierend auf mootools, das Skript SmartSlider entwickelt, das ihr hier herunterladen könnt: SmartSlider @ horttcore.de

Das Ganze funktioniert denkbar einfach: ihr ladet die Datei mootools.js (die ihr hier findet) zusammen mit der smartslider.js auf euren Webspace.
Diese beiden Dateien müssen nun im Head-Bereich eurer Webseite eingebunden werden:

<script type="text/javascript" src="http://domain.de/mootools.js"></script>
<script type="text/javascript" src="http://domain.de/smartslider.js"></script>

Um euren Inhalt aufklappbar zu machen, braucht ihr zweierlei: den Link und den aufzuklappenden Inhalt.
Der Link fungiert als Anker, das heißt, ihr setzt als Linkziel den Namen der ID des Inhaltselements mit einem # vorne dran. Wichtig ist, dass der Link das Klasse slider angehört.

<a href="#aufklappen" class="slider">klick mich</a>

<p id="aufklappen">Ich bin der Inhalt...</p>

Ihr könnt beliebig viele dieser aufklappbaren Texte auf eurer Seite unterbringen, allerdings darf jede ID nur einmal vergeben werden.

Falls eure Besucher JavaScript abgeschaltet haben, wird ihnen der ansonsten zunächst verborgene Inhalt ganz normal angezeigt.

SmartSlider für WordPress

Für WordPress-Nutzer gibt es SmartSlider sogar eigens als Plugin zum Herunterladen.
Wie jedes andere Plugin auch wird der Ordner smartslider in das Verzeichnis wp-content/plugins hochgeladen und das Plugin anschließend aktiviert.
Die aufzuklappenden Textbereiche kennzeichnet ihr wie oben beschrieben (dazu müsst ihr beim Erstellen eines Artikels oder einer Seite allerdings die HTML-Ansicht nutzen und nicht den visuellen Editor!)

Wichtig: mootools funktioniert nicht, wenn ihr bereits ein anderes Framework wie etwa jQuery verwendet!

wie geht’s & wer hat’s erfunden?

Das Zaubermittel heißt JavaScript, genauer gesagt: AJAX und jQuery.
Klaus Hartl vom Stilbüro hat diese Tab-Funktion entwickelt, die mittlerweile in der Version 3 vorliegt und über eine recht umfassende (allerdings englischsprachige) Dokumentation verfügt.

die benötigten JavaScript-Dateien

Zunächst einmal benötigen wir natürlich jQuery selber – herunterladen könnt ihr euch die aktuelle Version 1.2.6 hier. Aus dem breitgefächerten Angebot der jQuery UI-Bibliothek kommen dann noch die ui.core.js sowie die ui.tabs.js hinzu. Herunterladen könnt ihr euch diese hier, indem ihr in der Auswahlliste die beiden entsprechenden Häkchen setzt.
Diese drei Dateien ladet ihr auf euren Server und bindet sie im head-Bereich eurer Seite ein, damit euch die Scripte zur Verfügung stehen:
<script type="text/javascript" src="http://domain.de/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://domain.de/ui.core.js"></script>
<script type="text/javascript" src="http://domain.de/ui.tabs.js"></script>
Je nachdem, wie ihr euren Download gepackt habt, kann es sein, dass die ui.core.js und die ui.tabs.js in einem Package liegen – dann müsst ihr eben dieses Package einbinden.
(Unter WordPress bietet es sich an, im Ordner des jeweiligen Themes ein Verzeichnis namens js anzulegen und dort alle JavaScript-Dateien abzulegen – aber das kann man natürlich handhaben, wie man will.)
Dazu kommt der Aufruf des Scripts, den ihr ebenfalls in den head-Bereich notiert:
<script type="text/javascript">
$(function() {
$('#container ul').tabs({ fxFade: true, fxSpeed: 'fast' });

$('#container2 ul').tabs({ event: 'mouseover' }).find('a').click(function() {
return false;
});
});
</script>

die Navigation

Als nächstes legen wir die Navigation an, also die einzelnen Reiter, über die man die Tabs ansteuern kann.
Hier müsst ihr euch entscheiden: wollt ihr die Inhalte der Tabs alle zusammen in einer Datei speichern, oder soll in jedem Tab eine eigenständige Datei dynamisch nachgeladen werden?
Je nachdem unterscheidet sich das Aussehen der Links ein wenig. Das Grundgerüst bleibt jedoch gleich – eine ungeordnete Liste mit den einzelnen Reitern als Listenpunkt:

<ul>
<li><a class="ui-tabs" href="#erster-tab">erster Tab</a></li>
<li><a class="ui-tabs" href="#zweiter-tab">zweiter Tab</a></li>
<li><a class="ui-tabs" href="#dritter-tab">dritter Tab</a></li>
</ul>

Dies ist der Code für diejenige Variante, in der der Inhalt sämtlicher Tabs in der gleichen Datei steht und über Anker angesteuert wird. Wenn externe Dateien geladen werden sollen, ersetzt ihr das #erster-tab durch erster-tab.html (je nachdem, wo die Datei liegt und wie sie heißt, müsst ihr den Pfad natürlich anpassen).
Die Navigation sowie den Inhalt der Tabs (zu dem wir im nächsten Abschnitt kommen) packt ihr zusammen in ein Div und gebt ihm eine ID, beispielsweise container. Wichtig ist, dass diese ID dem Namen entspricht, mit dem die Liste in dem kleinen Script oben angesprochen wird.

der Inhalt der Tabs

In diesem Beispiel befinden sich die Inhalte aller Tabs in einer einzigen Datei (der gleichen, in der auch die obige Navigation liegt). Jeder Tab wird in ein Div gepackt – wichtig ist, dass die ID des Divs mit dem Linkziel der Navigation übereinstimmt.

<div id="erster-tab">
<h3>erster Tab</h3>
<p>Inhalt des ersten Tabs...</p>
</div>

<div id="zweiter-tab">
<h3>zweiter Tab</h3>
<p>Inhalt des zweiten Tabs...</p>
</div>

<div id="dritter-tab">
<h3>dritter Tab</h3>
<p>Inhalt des dritten Tabs...</p>
</div>

Diese Datei, also die Navigation mitsamt der Tab-Inhalte, speichert ihr als tabs.php ab und ladet sie in das Theme-Verzeichnis (also dahin, wo auch die index.php, header.php usw. liegen).

Jetzt wird die tabs.php an der gewünschten Stelle eingebunden. Im Fall von neontrauma.de ist dies in der index.php der Fall, da die Tabs nur auf der Startseite erscheinen sollen, aber selbstverständlich könntet ihr sie auch bereits in der header.php einbinden oder in jeder anderen beliebigen Datei. Wenn ihr WordPress nutzt, könnt ihr den Pfad zur Datei so angeben:
<?php include(TEMPLATEPATH . '/tabs.php'); ?>
Theoretisch müsst ihr den Code natürlich nicht auslagern, in Hinblick auf die Übersichtlichkeit eurer Dateien bietet sich das aber an.

das Stylesheet

Last but not least müsst ihr im Stylesheet eine Klasse hinzfügen, damit die Tabs funktionieren:
.ui-tabs-hide {
display: none;
}

Das Grundgerüst der Tab-Navigation steht nun – wenngleich die Links bis jetzt natürlich nicht wie Tabs aussehen, sondern einfache Listenpunkte sind. Auf das weitere Styling werde ich an dieser Stelle allerdings nicht eingehen, sondern verweise auf ein entsprechendes Tutorial, was ich vor einiger Zeit verfasst habe: Menue im Block-Style.

Dies realisierte man über das target-Attribut (in diesem Beispiel öffnet sich der Link in einem neuen Browserfenster):
<a href="link.html" target="_blank">Link</a>

Wer sich aber nun zum Ziel gesetzt hat, valides XHTML 1.0 Strict oder XHTML 1.1 zu coden, dem meldet der Validator einen Fehler, wenn man mit target arbeitet: in diesen beiden Versionen wurde dieses Attribut bereits abgeschafft.

der Grund

…hierfür ist folgender:
Ursprünglich stammt die Angabe des targets aus den Zeiten der Framesets (wir erinnern uns, gaaanz schlechtes Coding von Anno Pief ;-) ). Da machte es Sinn, Links zum Beispiel auch in übergeordneten Frames öffnen zu lassen. Im Zeitalter der Divs ist dies überflüssig geworden.

Zudem geht man dazu über, dem User die größtmögliche Usability anzubieten – dazu gehört auch, dass er selber entscheiden kann, wie sich ein Link öffnen soll, ob im selben Fenster oder in einem neuen Fenster/Tab.

trotzdem in neuem Fenster?

Mit etwas JavaScript lässt es sich realisieren, dass sich Links in einem neuen Fenster öffnen und das Coding trotzdem valides XHTML 1.1 ist. Voraussetzung dafür, dass dies funktioniert, ist natürlich, dass der User in seinem Browser JavaScript aktiviert hat. Hat er dies nicht, öffnet sich der Link einfach im gleichen Fenster.

Dem Link fügt man das onclick-Attribut hinzu:

onclick="window.open('http://linkziel.de'); return false"

Damit das Coding valide bleibt, muss beim Verwenden von JavaScript die Scriptsprache im Header definiert werden:
<meta http-equiv="Content-Script-Type" content="text/javascript" />

Von Hause aus kommt jQuery nur im Adminbereich zum Einsatz – damit du das jQuery-Framework auch in deinem Theme nutzen kannst, musst du die entsprechende Datei einbinden.
Diese liegt im Verzeichnis wp-includes/js/jquery/jquery.js.

Einbinden kannst du diese auf verschiedene Weise – es bietet sich jedoch an, sie so anzusprechen, wie WordPress es mit allen Plugins tut. So brauchst du keine Pfade anzupassen, falls du einmal etwas an deiner Verzeichnisstruktur änderst.

In der header.php deines Themes setzt du den folgenden Code in den head-Bereich:

<?php wp_enqueue_script('jquery');?>

Wichtig ist, dass er vor dieser Zeile hier steht:
<?php wp_head(); ?>
Viel Spaß damit!

Über den Sinn und den Unsinn solcher Alerts lässt sich streiten, insbesondere da sie gerade in der Vergangenheit desöfteren herzlich nervig eingesetzt wurden (nichts ist toller, als wenn man einen Link in einem neuen Tab öffnen will, dazu auf den Link rechtsklickt und dann ein Fensterchen aufpoppt: „Rechtsklick wurde gesperrt!“ – und wenn man das Ding dann entnervt weggeklickt hatte, schickte der findige Webmaster noch ein zweites Fensterchen hinterher: „Ätsch!“ …

der Code

Um solch ein Fenster aufpoppen zu lassen, benötigen wir die JavaScript-Funktion alert().

<script type="text/javascript">
alert("Hello World!"); </script>

Anstelle von „Hello World!“ setzt du natürlich den gewünschten Text ein.

und wann?

Setzt man den obigen Code im Quelltext gleich hinter das öffnende Body-Tag (<body>), so poppt das Fenster beim Öffnen der Seite auf.

Eine andere Möglichkeit wäre es, dass sich das Fensterchen beim Anklicken eines Links öffnet.
Dazu brauchen wir einen sogenannten Event-Handler – also eine Anweisung, die sagt, dass bei einer bestimmten Aktion (zum Beispiel onclick = beim Klicken) etwas passieren soll.

<a href="..." target="..." title="..." onclick="alert('Hello World!')"> ... </a>