Zweispaltiges Akkordeon

[AzRaIL]

Nabend,

Möchte ein zweispaltiges Akkordeon erstellen.
Der Kniff daran ist, dass die einzelnen Slides bei Klick auf 100% Breite gehen- und nach oben rücken sollen.
Habe schon einen Ansatz erstellt:

http://jsfiddle.net/y8xfV/1/

Solange man nur einen Slide anklickt klappt das mit dem verändern der Breite. (mithilfe von einem Zähler)
Öffnet man einen Slide aber und klickt dann einen anderen an geht es nicht mehr da das Script nur die beiden Zustände des Zählers (1 und 0) kennt und sich nicht merkt welcher Slide angeklickt wurde.

Das zweite Problem das ich habe (was ich versuche mithilfe der active Klasse zu ändern) ist, dass der aktive Slide nach oben rücken soll. Dies klappt wenn ich der active Klasse eine absolute Position mit top:0 und left:0 gebe.
Dann werden aber die oberen Slides einfach überdeckt. Das ist also auch keine Lösung.

Hat jemand ne Idee wie man das umsetzen könnte?

lg

 

[Sempervivum]

Nimm doch statt des Zählers einfach die active-Klasse, um zu prüfen, ob das Akkordeon auf oder zu ist.

 

[Tronjer]

Im Fiddle gibt es zwei Reihen von Divs, die sich nach Even und Odd unterteilen ließen. Klickt man auf ein Odd Element erhält dieses 100% Breite und das folgende Even verschiebt sich nach unten. Klickt man hingegen auf ein Even Element, verschiebt sich dieses nach unten und das davor stehende Odd bleibt bei 50% Breite.

Mit dieser Even/Odd oder Modulo Logik ließe sich schon mal ein besserer Ansatz als mit einer Zählervariablen stricken, obwohl das im vorliegenden Fall keine Problemlösung wäre.

Pseudocode:

if ($(this) % 2 == 0) {
  $(this).prev(element).css('width', '100%');
// weitere Anweisungen
}

Das zweite Problem das ich habe (was ich versuche mithilfe der active Klasse zu ändern) ist, dass der aktive Slide nach oben rücken soll.

Was genau meinst du mit "nach oben rücken"? Soll der angeklickte Slide an die Stelle von Slide 1 rücken und darf immer nur ein Slide geöffnet sein? In dem Fall brauchst du nichts zu verschieben und in den Slides muss theoretisch auch kein Text stehen. Oder anders formuliert sollen nicht die Elemente selber sondern lediglich der Content der Elemente verändert werden.

Nehmen wir als Ausgangslage die sechs geschlossenen Slider:
- Im ersten Schritt implementierst du einen Ansatz, der beim Klick auf einen Slider die H2 neu nummeriert, d.h., die angeklickte Zahl steht anschließend oben und die verbleibenden fünf Zahlen werden in aufsteigender Reihenfolge an die Slider vergeben.

- Im zweiten Schritt erfolgt die Zuweisung des Contents. Dazu könnte man bsw. für die Inhalte ein Array oder Object erstellen und per $.each() das mit dem Index oder Objekt Key korrespondierende Element in den ersten Slide schreiben, also so etwas:

var texte = {
  "slide_one": "Ein Text ..",
  "slide_two": "Noch ein Text..."
  ............
};

<div data-slide="slide_one">

- Der letzte Schritt wäre dann eine CSS-Manipulation per toggleClass(), welche das erste Slide auf display: none/block und die width auf 50%/100% setzt.

Das sollte dir als Lösungsansatz reichen. Ansonsten könnte ich das Script auch gleich selber schreiben. ;)