Accordion Verhalten anpassen

Guten Morgen,

ich habe für einen Kunden das Accordion in seine Page eingebunden. Nun ist es so das es auf einer Seite 3 Accordions übereinander gibt mit relativ viel Inhalt. Wenn jetzt das eine aufgeklappt wird und mann den Inhalt bis zu ende ließt und runterscrollt und danach auf das nachfolgende Accordion klickt dann springt das neu geöffnete Accordion sehr unvorteilhaft ganz hoch und fährt dann wieder runter (das habe ich extra integriert damit das accordion nach dem öffnen immer oben am Browserrand steht) Ist es vielleicht besser wenn die Accordions geöffnet bleiben? Er springt ja nur so weit nach oben weil sich das erste Accordion wieder schließt. Oder ist es besser Tabs zu nehmen?

Danke für Infos! Hier der Link

Hi,

mir persönlich gefällt der Effekt / die Seite sehr gut.
Für den Leser ist wichtig, dass er schnell an die gewünschten Informationen rankommt und das ist ja der Fall. Ist eben auch etwas Geschmacksache.
Wenn alle Akkordeons geöffnet bleiben hast Du jede Menge zu scrollen, das würde mir eher nicht gefallen. Tabs wäre auch bestimmt eine schicke Alternative. Ob besser oder nicht kann man drüber reden, aber eben ANDERS.

Das war aber nur mal meine Meinung zu der Seite.

Gruß
tschero

Ich finde den Effekt auch ok so. Würde den Effekt nur "weicher" gestalten - ease-in bzw. ease-out oder noch etwas anderes als Bewegungsart testen (jqueryui.com/easing/). Das sieht dann etwas gefälliger aus.

Das was mich eher gestört hat:

• der zweite Akkordeonteil ist geöffnet
• das erste Akkordeonteil ist sichtbar (scheint durch das Menü durch), kann aber ohne Scrollen nicht geklick werden.

Da würde ich mir wünschen, dass Du nur soweit nach oben scrollst, dass die oberhalb liegenden Akordeonteile auch erneut direkt geöffnet werden können.

Moin erstmal und vielen Dank für das Feedback. Das mit dem ease wäre ne coole sache. Allerdings sind meine Programmierkenntnisse sehr begrenzt. Das Template vom Accordion sieht momentan so aus.

Code:

---

<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        active: false,
        collapsible: true,
        create: function(event, ui) {
          ui.header.addClass('active');
        },
        activate: function(event, ui) {
          ui.newHeader.addClass('active');
          ui.oldHeader.removeClass('active');
        }
      });
    });
    $('.ce_accordion').each(function(){
          var acc = $(this);
          acc.click(function(){
          setTimeout(function() {$('html, body').animate({ scrollTop: ((acc.offset().top)-100) }, 'slow')}, 800);
        });
  });
  })(jQuery);
 
</script>

---

Wie kann ich denn da das ease einbauen?

Zitat:

---

Zitat von toto

Allerdings sind meine Programmierkenntnisse sehr begrenzt.

---

Meine js-Kenntnisse sind leider auch sehr begrenzt. Für einen solchen Akkordeon-Effekt habe ich mich seinerzeit mal durch Mootools gekämpft.
Mit ein bisschen Wühlen und Testen sollte es eigentlich mit der oben verlinkten Quelle machbar sein die Lösung zu finden. Vielleicht kann Dir ja einer der js-Spezialisten noch einen heißen Tip geben.
Ich hatte mir das vor einiger Zeit mal angeschaut. Ich erinnere mich dunkel, dass für jquery dazu noch ein-plugin benötigt wird.
Habe gerade noch zwei Links zum Thema gefunden. Vielleicht hilft Dir das weiter.

matthiasschuetz.com/jquery-tutorial-animationen-und-effekte-erzeugen
gsgd.co.uk/sandbox/jquery/easing/

Servus nochmal,

mein Kunde würde jetzt doch gerne mal ausprobieren das die Accordions geöffnet bleiben wenn man ein neues öffnet. Ich habe hier im Forum gestöbert aber leider nur die mootools Varianten entdeckt. Weiß jemand wie es mit jQuery umgesetzt werden kann das sich ein Accordion nicht automatisch schließt wenn man ein neues öffnet?

Das ist nicht so einfach. Schau mal hier http://stackoverflow.com/questions/3...-sections-open