Div/ Taballe auf- und zuklappen

Nasrin · 03.09.2009

Hallo Leute,

weiss einer vielleicht, wie man ein Div oder eine Tabelle auf- und zuklappen lassen kann, sprich "Klick auf Button = Inhalt zu", nochmal "Klick auf Button= Inhalt wieder da"?

Sämtliche Möglichkeiten die ich gefunden habe, sind mit JS, diese oder eine andere Scriptsprachen darf ich aber nicht einsetzen. Kann man das ganze auch über CSS steuern? Achja, Cookies dürfen auch nicht gesetzt werden.

Würde mich freuen, wenn mir da jemand helfen kann. Schonmal vielen Dank für´s lesen.

LG
Nasi

MyBad · 03.09.2009

AW: Div/ Taballe auf- und zuklappen

Hallo!

Im CSS könntest du Pseudo-Klassen

hover, :link, :active, ...) verwenden. Bedenke aber, das der IE 6 Pseudoklassen nur beim a-Tag kennt. Dies würde bedeuten, dass dein DIV innerhalb eines a-Tags sein müsste, was widerrum nicht valide ist. Wenn du auf den IE 6 keinen wert mehr legen musst, kannst du das über Pseudoklassen lösen.

Weitere Möglichkeit: Mit PHP! Das Problem hier ist, dass die Seite neugeladen werden muss. Wenn das auch nicht in eurem Sinne ist, wirst du entweder js verwenden oder aber auf diese Aufklappboxen verzichten müssen.

Gruß
Tim

sokie · 03.09.2009

AW: Div/ Taballe auf- und zuklappen

"Klick auf Button = Inhalt zu", nochmal "Klick auf Button= Inhalt wieder da"?

bekommst du ohne javascript nicht hin, da css keine 'klick' events kennt.

Dennis Kovarik · 03.09.2009

AW: Div/ Taballe auf- und zuklappen

sokie schrieb:
bekommst du ohne javascript nicht hin, da css keine 'klick' events kennt.

So ist es, hier ein Beispiel, kannste gerne verwenden:

Code:

<html>
<head>
<title>Ausklappmenü</title>
<script language="JavaScript">
function ausklappen() {
/* Hier ist die Funktion "ausklappen" die unten mit dem Link aufgerufen wird */
if (document.getElementById("ausgeklappter_text").style.display == "none") {
document.getElementById("ausgeklappter_text").style.display = "block";
}
else {
document.getElementById("ausgeklappter_text").style.display = "none";
}
/* Hier wird entschieden, ob der Text, der ausgeklappt werden soll, schon ausgefahren wird oder nicht,
wenn ja, dann wird er eingefahren, wenn nein, dann wird er ausgefahren */
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="width:350px; background-color:#C9C9C9;">
<a href="#" onclick="ausklappen()">Hier den Text eingeben, auf den geklickt werden soll</a> <!-- Hier ist der Link, der die Funktion ausführt !-->
<div id="ausgeklappter_text" style="display:none; background-color:#A9A9A9;">
Hier steht dann der Text, der ausgeklappt werden soll.
</div>
</div>
</body>
</html>

Grüße