Akkordeon (Einzelelement) beim Öffnen an richtige Stelle scrollen?

**jogiwebster** · 12.08.2021, 16:32

Hallo!

Ich setze mehrere Accordions als Einzelelement untereinander ein. Inhalt ist einiges an Text.
Wenn ein Element geöffnet ist und ich ein anderes darunter durch Klick öffne, dann schließt sich der zuvor geöffnete Bereich korrekt, aber die Scrollposition bleibt dieselbe und der Inhalt ist oben "abgeschnitten". Damit man den neu geöffneten Bereich ganz lesen kann, müsste immer automatisch an den Anfang des geöffneten Akkordeon-Elementes gescrollt werden.

Hat das schon jemand gelöst oder kann helfen?

Danke!

Gruß, Jogi

**stefan-at-work** · 12.08.2021, 18:24

Hi Jogi,

ergänze mal das Template j_accordion.html

Code:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
	if(ui.newHeader.length > 0) {
    	$('html, body').animate({
    	scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight()
    		}, 400);
	}
      }
    });
  });
</script>