Vertikaler Accordeon-Slider für lange Texte gesucht

[MrMurphy]

Hallo,

ich habe eine Seite mit langem Text. Der soll durch einen vertikalen Accordeon-Slider unterteilt werden.

Ich habe auch jede Menge gefunden, die einen Teil meiner Wünsche erfüllen. Zum einen sollen die Schalter als Wechselschalter fungieren, zum anderen soll der aktuell geöffnete Container geschlossen werden, wenn ein anderer geöffnet wird.

Bei langen Texten werden ab dem 2. Schalter die Container aber nach oben geöffnet, so dass zum Lesen des grade geöffneten Texten erst mal wieder nach oben gescrollt werden muss. Das erschwert die Benutzung der Seite.

Nicht so wichtig, aber schön wäre es, wenn man Schalter anlegen könnte, die alle Texte im Wechsel gleichzeitig öffnen und schließen.

Ein Beispiel zum aktuellen Stand habe ich hier hinterlegt:

Slider Problem

JavaScript muss natürlich zugelassen sein.

Ich habe auch schon über Google gesucht. Allerdings ist bei den Live-Demos immer so wenig Text hinterlegt, das sich das nicht direkt testen läßt, sondern ich immer erst mal eine Seite basteln muss.

Gruss

MrMurphy

 

[Timmer]

Der Browser hält die Scrollposition, weil du gleichzeitig einen Teil schließt und einen anderen öffnest. Dies kannst du verhindern, indem du erst schließt und dann öffnest, oder indem du die Scrollposition selbst bestimmst.

$('html, body').animate({scrollTop: $('#zielteil').offset().top}, 1000);

Allerdings wird das schwer, da du die entgültige Position des Zielteils erst kennst, wenn dieser geschlossen ist. Also müsstest du von $('#zielteil').offset().top die Höhe aller geöffneten Teile über dem Zielteil abziehen.

Um alle Teile zu öffnen, kannst du folgendes nutzen:

$('.btn_trigger').click( function() {
    if ( $(this).hasClass('open') ) {
        $('.toggle_container').slideDown('slow');
        $('.trigger').addClass('trigger_active');
    } else if ($(this).hasClass('close')) {
        $('.toggle_container').slideUp('slow');
        $('.trigger').removeClass('trigger_active');
    };
    return false;
});

und die dazugehörigen Buttons

<span class="btn_trigger open">Alle öffnen</span> <span class="btn_trigger close">Alle schließen</span>