Aber alle Versuche scheiterten bis hier her. Bin um jeden Rat dankbar.
Nebst dem Einwand von Gunnar:
Du hast das Konzept von Sektoren Element-Kollektions noch nicht verstanden und suchst vermutlich einfach nur die each-Methode (für schleifen) - in deinem Fall ist aber eher each ebenfalls nicht nötig, das geht wesentlich einfacher
In der Annahme, dass du dein HTML in eine vernünftige Struktur bringst, könnte das so aussehen:
$(.teaser h2).bind(
'click',
function() {
// alle andere Teaser verstecken
$(.teaser .abstract).hide('fast');
// den zugehörigen Text der derzigen einblenden
$(this).next('.abstract').show('fast)';
}
);
$(.teaser .abstract).bind(
'click',
function() {
$(this).hide('fast)';
}
);
<ul id="teaser">
<li>
<h2>titel</h2>
<div class="abstract>
<p>lorem ipsum</p>
</div>
</li>
<li />
</ul>
Beachtet ist hierbei nicht das ggf. nötige hinzufügen oder entfernen von Klassen um aufgeklappte Überschriften anders darzustellen oder um die Animationen entsprechend zu stoppen, wenn jemand eine überschrift mehrfach anklickt (damit kein Ping-Pong-Effekt entsteht).