mit jQuery bst. Element ansprechen

[dIgel]

Moin,
ich hab folgendes Markup:

  
<div class="abschnitt">  
...bisschen Text...  
   <div class="details">  
      ...mehr Text...  
   </div>  
</div>  
  
<div class="abschnitt">  
...anderer Text...  
   <div class="details">  
      ...mehr anderer Text...  
   </div>  
</div>  
  
...  

Ich möchte nun mithilfe von jQuery .details ausblenden und durch einen neuen Link am Ende von .abschnitt den jeweiligen .details-Container wieder ausfahrbar machen.
Jetzt komm ich aber einfach nicht drauf, wie ich gezielt den .details-Container ansprechen kann, sodass nur dieser wieder ausfährt. Hab bis jetzt folgendes:

  
		$(document).ready(function(){			  
			$(".details").hide();  
			$(".abschnitt").append('<a class="open" href="#">mehr</a>');  
			$("a.open").click(function(event){  
				$(".details").show("normal"); //<-- hier hänge ich, das hier fährt ja alle .details aus...  
				event.preventDefault();  
			});  

Hab schon was mit $(this).parents(".abschnitt") probiert, aber ich hab keinen Plan wie ich dann wieder das gewünschte .details ansprechen soll - sowas wie $(this).parents(".abschnitt").(".details").show() klappt nicht.
Das ist ein total simples Problem, ich weiß, aber über google find ich nix gescheits, und bevor ich da noch mehr Zeit damit verschwende, frage ich lieber euch.
Gruß, CS

[Gunnar Bittersmann]

@@dIgel:

nuqneH

Ich möchte nun mithilfe von jQuery .details ausblenden und durch einen neuen Link am Ende von .abschnitt den jeweiligen .details-Container wieder ausfahrbar machen.

Nein. Was du möchtest, ist ein „Akkordeon“.

JavaScript ist dein gewähltes Werkzeug zu dessen Umsetzung; für moderne Browser ist dafür aber kein JavaScript erforderlich.

Dann funktioniert auch der Zurück-Button – mit etwas Nachhilfe.

Für IE < 8 könnte man :target mit CSS-Expression realisieren.

Qapla'

[dIgel]

Okay, diese Möglichkeit kannte ich gar nicht. Aber ich würde es doch lieber mit jQuery machen, das funzt dann für mehr Browser, und ich komme glaube ich im Endeffekt mit weniger Code weg. jQuery benutz ich ja auch noch für ein paar andere Geschichten, das Framework hätte ich also so oder so drin. Aber Danke für die Antwort!

[suit]

für moderne Browser ist dafür aber kein JavaScript erforderlich.

Kannst du hier bitte näher erläutern, wie mann damit eine schöne Animation hinbekommt? :)

[Gunnar Bittersmann]

@@suit:

nuqneH

für moderne Browser ist dafür aber kein JavaScript erforderlich.

Kannst du hier bitte näher erläutern, wie mann damit eine schöne Animation hinbekommt? :)

Aber gerne doch: [CSS3-TRANSITIONS]

Qapla'

[suit]

Aber gerne doch: [CSS3-TRANSITIONS]

Ist das cool - welcher Browser kann das bereits?

[Gunnar Bittersmann]

@@suit:

nuqneH

Aber gerne doch: [CSS3-TRANSITIONS]

Ist das cool - welcher Browser kann das bereits?

Hehe, ich sprach von „moderne[n] Browser[n]“, nicht von aktuellen.

Qapla'

PS: Frei nach Bruce Springsteen: JavaScript is for hangers, winners use CSS.

[suit]

ich sprach von modern [...] nicht von aktuell [...]

modern

Bedeutungen:
[1] der Zeit entsprechend, neuzeitlich
[2] umgangssprachlich: in Mode

Synonyme:
[1] auf der Höhe der Zeit
[1, 2] aktuell, abwertend: neumodisch
[2] modisch, in, angesagt

[molily]

Hallo,

Von display:none nach block lässt sich (noch) in keinem Browser animinieren. Das wird gerade erst diskutiert. Ich denke nicht, dass wir hier irgendwann mit einem Einblend- oder Aufklappeffekt rechnen können. Auch das Animieren von height:0; overflow:hidden zu height:auto geht nicht. Mit einem festen height-Wert ginge es, aber den kann und will man nicht ins CSS schreiben.

Darüber hinaus ist display:none ohnehin die falsche Methode, um Inhalte auszublenden. Das ist bekanntlich nicht barrierefrei insofern, dass viele Screenreader diese Inhalte dann komplett ignorieren. Barrierefrei wäre z.B. die Off-Left-Methode, allerdings kann man die ebenfalls nicht vernünftig mit CSS3-Transitions wieder ins Bild holen. Fazit: Solche flexiblen und ansehnlichen Animationen kann man mit CSS3-Transitions derzeit nicht lösen.

Die Idee, Elemente nur bei :target (also bei Fokussierung) einzublenden, halte ich prinzipiell für problematisch. Ich kann mir nicht vorstellen, dass das zugänglich ist - ich habe es aber nicht in Screenreadern getestet. Da die zumeist auf IE aufsetzen bzw. mit IE benutzt werden und z.B. NVDA für Firefox display:none ohnehin vorliest, ist das in der Praxis auch schwer testbar und hinge stark von dem JavaScript-Fallback ab.

Akkordeons in JavaScript sind von der Usability einfach vielseitiger und komfortabler umzusetzbar. Ein Element kann z.B. unabhängig von seinem Fokus gezeigt/verborgen werden. Das geht hervorragend mit Tastatur und Maus. Zudem ist die Barrierefreiheit gut getestet, siehe bspw. dieses Tab-Script (Akkordeons funktionieren prinzipiell ähnlich).

Programmatische Interfaces mit JavaScript erlauben bessere Interaktion als die sehr beschränkten CSS-Deklarationen (»standardmäßig unsichtbar, wenn :target, dann sichtbar«). Wenn die Gewinner für solche Aufgaben CSS benutzen, dann gewinnen sie damit höchstens eine schlecht benutzbare Site.

Mathias