Antworten zum Thema „Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke“

chohan · 20.07.2010

[FONT=&quot]Hallo, wie kann man mit Dremwaever CS4, Fragen und Antworten so organisieren, dass der Antwort(paragraf) nur dann sichtbar wird, wenn der Leser auf die Frage klickt? Damit ist es möglich, viele Fragen geordnet und übersichtlich auf einer Seite unterzubringen... (Als Beispiel hier ein link: [/FONT][FONT=&quot][/FONT][FONT=&quot])[/FONT]

cebito · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

DW CS10 kann dir da auch nicht helfen, hier sind Kenntnisse in Javascript, respektive jQuery&co. gefragt. In HTML5 könnte es dann auch mit <details> gehen, hab ich noch nicht ausprobiert, sind aber wohl eh böhmische Dörfer für dich.

Chriko · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

So könnte ein Anfang aussehen:

Code:

<!DOCTYPE html>
<head>
<style type="text/css">
#Frage1 { 
display: none;
}
</style>
<script type="text/javascript">
function Antwort(Frage) {
  document.getElementById(Frage).style.display = 'block';
}
</script>
</head>
<body>
<a href="javascript:Antwort('Frage1')">ja oder nein?</a><p id="Frage1">vielleicht</p>
</body>
</html>

hedoo · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

Hallo,
habe das auch schonmal mit js gelöst und zwar mit dem JsFramework scriptacol.us.
einBeispeil wie es aussehen könnte:

Den Dowload des Frameworks findst du hier:
script.aculo.us - web 2.0 javascript

Gruß
hedoo

tmbach15 · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

Das ganze funktioniert aber auch bereits mit Verwendung von lediglich HTML und CSS.

Die Antworten werden in einen div-Container verpackt und mit {display:none; } versteckt.

Der Fragencontainer bekommt eine Pseudoklasse :hover oder - wie in der Fragestellung aufgeführt - :active verpasst.

Bei richtiger Anwendung erscheint der Container mit der Antwort, wenn mit der Maus in den Fragecontainer geklickt wird.

cebito · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

tmbach15 schrieb:
Der Fragencontainer bekommt eine Pseudoklasse :hover oder - wie in der Fragestellung aufgeführt - :active verpasst.

Bei richtiger Anwendung erscheint der Container mit der Antwort, wenn mit der Maus in den Fragecontainer geklickt wird.

Mit dieser Pseudo-Klasse kannst du aber keinen anderen Container ansprechen. Du könntest höchstens overflow ansprechen und das würde auch nur solange funktionieren, wie die Maus gedrückt ist, wer hält die schon so lange fest, bis er fertig gelesen hat? - mich würds nerven und schon wär ich weg...

tmbach15 · 20.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

Ja okay, es kann damit immer nur ein Antwortblock geöffnet sein.

Das Konzept hat aber nichts mit overflow zutun.

Der Antwortcontainer bekommt selbstverständlich noch z.B: ein :hover { display: block } und damit kann sich der Leser alle Zeit der Welt nehmen, solange nicht mit der Maus woanders hingeklickt wird.

Ist also nicht direkt ein Grund, um direkt abzuwandern.

Chriko · 22.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

Eine Möglichkeit ohne Javascript wäre noch mit focus.

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p#antwort1 { 
display: none;
}
a:focus p#antwort1{
display:block;
}
</style>
</head>
<body>
<a href="#">ja oder nein?<p id="antwort1">vielleicht</p></a>
</body>
</html>

Somit hätte man nicht das Problem. dass die Maustaste die ganze Zeit gedrückt werden muß wie oben mal erwähnt. Blöd allerdings bei langen Texten, denn wenn man woanders hinklickt um zu scrollen oder so, dann ist natürlich der Fokus weg und somit auch der Text

chohan · 22.07.2010

AW: Antwort(paragraf) öffnet sich, wenn ich auf die Frage klicke

Herzlichen Dank, für die vielen nützlichen Beiträge. Die Vorschläge von Tmbach15 und Chriko werde ich beide testen und dann einen davon anwenden. Nochmals danke, auch für die restlichen Antworten, weil diese zur Diskussion angeregt haben.