Boxen per Klicken Öffnen und schließen lassen

LiberrY · 15. Dezember 2011

Hallöchen,

ich bin derzeit dabei eine Seite zumachen und nun wollte ich mich erkundigen und zwar ich möchte eine Statische Seite bauen, in denen Boxen sind. Diese Boxen sind aber geschlossen und sollen sich erst öffnen nachdem man z.b. auf die Box geklickt hat.

Meine Frage ist ganz simpel, wie kann ich bei der TPL das so machen das die Boxen sie öffnen lassen. Das mit den Boxen einfügen ist ja kein Problem nur stehe ich vor dem Problem des Öffnens / Schließens.

Tom · 15. Dezember 2011

Das geht zum Beispiel so:

HTML

<a href="javascript: void(0);" onClick="Effect.toggle('userPanelSlide', 'blind', { duration: 0.5 });" title="">Klick</a>


		<div id="userPanelSlide" style="display:none; overflow: hidden;">
Blubb
		</div>

LiberrY · 15. Dezember 2011

Danke schön

LiberrY · 23. Januar 2012

Tom sag mal, geht das auch als Hover sprich ich muss nicht drauf klicken es reicht wenn ich mit der Maus drüber fahre?

Tom · 28. Januar 2012

Sollte gehen wenn du das onclick gegen ein onmouseover tauscht. Aber ich weiss nicht wie die dann wieder zu geht. Vermutlich gar nicht, da wird man sich wohl was eigenes bauen müssen.

GneX · 28. Januar 2012

Ich konnte zwar nicht ganz rauslesen, ob es sich um eine WCF-Installation handelt, aber ich gehe mal davon aus. Im WCF gibt es bereits eine fertige Funktion, welche sich openList nennt und so benutzt werden kann:

Code

<a href="#" onclick="return !openList('DIV-ID', { openTitle: '{lang}XXX.show{/lang}', closeTitle: '{lang}XXX.hide{/lang}' })"><img id="DIV-IDImage" src="{icon}plusS.png{/icon}" alt="" title="{lang}XXX.show{/lang}" /></a>

Alternativ kann auch auch onmouseover und onmouseout nutzen:

Code

<a href="#" onmouseover="Effect.toggle('DIV-ID', 'blind', { duration: 0.5 });" onmouseout="Effect.toggle('DIV-ID', 'blind', { duration: 0.5 });">LINK</a>

LiberrY · 29. März 2012

Hayho,

ich wollte das nochmal aus versenkung holen ich habe denn nun folgenden Code von dir genutzt:

Code

<a href="#" onclick="return !openList('befehle', { openTitle: '{lang}Member Befehle{/lang}', closeTitle: '{lang}Member Befehle{/lang}' })"><img src="{icon}plusS.png{/icon}" alt="" title="Auf- und Zuklappen"></a>

und in der DIV steht auch die ID MemberBefehle jedoch ist die Box immer noch offen und nicht standartmäßig geschlossen.

Dazu sollte ich sagen, das ich das ganze in einer Box verwenden möchte. Weißt du waren das liegen könnte das die Box nicht geschlossen ist wenn man die Seite aufruft?

GneX · 29. März 2012

Du musst sie selbst schließen: style="display: none;"
Dies sollte direkt im Quellcode stehen und nicht im CSS-Code, da es sein könnte, dass der JavaScript-Code dies nicht (richtig) erkennt.

LiberrY · 29. März 2012

Hätte ich auch selber drauf kommen können -.-

Boxen per Klicken Öffnen und schließen lassen

cls-design

Informationen

Demoinstallationen

Hilfe