Text über Link mittels CSS ein- & ausblenden ?

Hallo,
ich habe folgendes vor und komme einfach nicht weiter:

Ich möchte verschiedene Texte mittels Link auf einer Seite ein & ausblenden lassen ohne das die Seite jedes mal neu geladen werden muss.

Nun meine Frage:
Kann ich dies über "id" mittels CSS realisieren ?

zB. so:
<div id"versandkosten">
Hier der Text über Versandkosten
</div>

<div id"widerruf">
Hier der Text über Widerrufsmöglichkeiten
</div>

<div id"agb">
Hier der Text der AGBs
</div>

Links dachte ich dann so:
<a id="versandkosten" href="#">Versandkosten</a>
<a id="widerruf" href="#">Widerruf</a>
<a id="agb" href="#">AGBs</a>

CSS:
#versandkosten {
color: #000000;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

Klickt man jetzt auf "Versandkosten" soll der Text über Versandkosten erscheinen, klickt man auf "Widerruf", dann der Text des Widerrufs usw.

Funktioniert aber nicht :(!!!
Fehlt da eventuell noch eine Javascript-Funktion und fals ja, welche ?
Wie könnte ich mein Vorhaben aber sauber für alle gängigen Browser realisieren ?

Danke & Gruß Dirk O.

@ Japs

also ich nutze für solche Dinge im jQuery.
Schau mal hier, dort gibt es viele leicht anpassbare Beispiele...

https://jqueryui.com/demos/show/

geht auch one js indem du zwischen <a></a> noch ein <span> mit deinem tooltip packst.
css style waere dann

a span {display:none;}
a:hover span {display:block; ...}

und noch ein bischen mit position absolute ausrichten usw.