Adrian Kousz: Zeigen-Verstecken-Buttons

Beitrag lesen

So, vielen Dank für die Antworten!
Ich habe das Problem schlussendlich so gelöst, wie ihr unten sieht. Falls jemand noch einen Verbesserungsvorschlag hat, kann er/sie gerne nochmals schreiben!

Grüsse,
Adrian

<html>
<head>
<title>Informaticus Komplettlösung</title>
<style type="text/css">
.showhide {
 border: 1px solid #CCC;
 width: 80%;
 cursor: pointer;
 padding: 10px;
}
div.showhide:hover { border-color: red }
.showhide div { display: none }
</style>
<script type="text/javascript">
function showhide(where) {
 if (document.getElementById(where).style.display != "block") {
  document.getElementById(where).parentNode.firstChild.replaceData(0,7,"Verstecken!");
  document.getElementById(where).style.display = "block";
 }
 else {
  document.getElementById(where).parentNode.firstChild.replaceData(0,11,"Zeigen!");
  document.getElementById(where).style.display = "none";
 }
}
</script>
</head>

<body>
<div class="title">
<span style="font-family:'Courier New','Lucida Console'">Informaticus</span> Komplettlösung
</div>

<br>(...)<br><br>

(Man kann auch alle Kombinationen ausprobieren, wenn man Pech hat, kann es aber lange gehen: Es gibt 5<sup>3</sup> = 125 Möglichkeiten.) Die richtige Lösung ist folgende:
<div class="showhide" onClick="showhide('logical')">Zeigen!
<div id="logical">
<table border="1">
<tr><th>Apsis</th><th>Beschäftigung der Gilde</th><th>Gildenhaus</th><th>Standort</th></tr>
<tr><td>3</td><td>Datenkommunikation</td><td>Turm des Schweigens</td><td>Titanengebirge</td></tr>
<tr><td>4</td><td>Bildverarbeitung</td><td>Analogitenkloster</td><td>westlicher Gipfel der Zwillingsberge</td></tr>
<tr><td>5</td><td>Programmierung</td><td>alte Mühle</td><td>Ba-it-Wälder</td></tr>
<tr><td>6</td><td>Wissensverarbeitung</td><td>Monolithobservatorium</td><td>Kaah-ih Hochebene</td></tr>
<tr><td>8</td><td>Technische Informationssysteme</td><td>Kontor</td><td>Zwillingstal</td></tr>
</table>
<b>alte Mühle: Ba-it-Wälder<br>6. Apsis: Wissensverarbeitung<br>Haus der Gilde mit Techn. Info-Systemen: Kontor</b>
</div></div>

</body>
</html>