bei Klick auf Accordion an Anfang Accordion springen, oder auf Element im Accordion

**sonnenblume** · 11.11.2009, 11:39

Hallo,
ich habe auf einer Mitarbeiter-Seite mehrere Accordions für die verschiedenen Abteilungen. Diese sind am Anfang alle geschlossen.
Klickt man auf eine Abteilung öffnet sich diese und die Mitarbeiter erscheinen alle (ziemlich viele). Klickt man nun auf die nächste Abteilung schließt sich die davor geöffnete. Bis dahin ist alles perfekt.
ABER: beim Öffnen der neuen Abteilung bleibt der Browser in der Höhe stehen, auf der er gerade war. D.h. Mitarbeiter die weiter oben stehen, sind nicht ohne nach oben scrollen sichtbar. Das ist ziemlich ungünstig, denn man erwartet dass er automatisch an den Anfang des Accordions springt.

Lösungsversuche mit Ankern haben nichts gebracht.

Meine Idee wäre, die Geschwindigkeit des Einklappens höher zu stellen als die Geschwindigkeit des Ausklappens. Entsprechende Versuche mit der mootools.tpl haben allerdings nicht zum gewünschten Ergebnis geführt.

Ich habe "duration" angegeben, dadurch wird allerdings die Geschwindigkeit beider "Aktionen" beeinflusst.

ZWEITES PROBLEM:
Von einer anderen Seite möchte ich auf diese Mitarbeiterseite verlinken, und dabei schon auf die entsprechende Abteilung verweisen, d.h. eines der Accordions soll sich öffnen und die entsprechenden Mitarbeiter anzeigen.
Auch hier mit Ankern kein Erfolg.

Hat jemand eine Idee, wie ich das lösen kann; oder hat jemand so etwas vielleicht schon gemacht?

**Sebastian** · 11.11.2009, 16:47

HI

beide Lösungen sind nur sehr schwierig zu lösen, es braucht dazu auf jeden Fall gute Kenntnisse von Javascript und Mootools. Ich denke, die besten Lösungsvorschläge wirst du im Mootools-Forum erhalten.

Sebastian

**sonnenblume** · 08.12.2009, 10:22

Wonach muss ich denn da genau suchen? Habe noch keine Lösung für mein Problem gefunden.

**Sebastian** · 08.12.2009, 15:40

HI

vielleicht „Akkordeon per Link öffnen“, oder so. Aber ich weiß nicht mal, welche Sprachen das Mootools-Forum spricht, also wird dir vielleicht Google (oder Bing, etc.) weiterhelfen.

Sebastian

**Toflar** · 08.12.2009, 15:43

mootools Foren gibts kaum.

Ab ins IRC, freenode.net, #mootools

Sind alle superfreundlich und die devs von mootools helfen sogar

**sonnenblume** · 09.12.2009, 14:15

Danke erstmal für eure Antworten. Ich habe in einem anderen Thread des Forum folgenden Code gefunden.

PHP-Code:


<script type="text/javascript">

<!--//--><![CDATA[//><!--

window.addEvent('domready', function()

{

    new Accordion($$('div.toggler'), $$('div.accordion'),

    {

display:<?php 

$aid=$_GET[faqid];

if  ($aid== '') {

echo "false";

}

else {

echo $aid;

}

?>,

        opacity: (window.ie ? false : true)

    });

});

//--><!]]>

</script>

Wie aus dem Context zu erkennen ist, könnte das vielleicht die Lösung sein? Allerdings bezieht sich das Script auf die FAQ und vermutlich ist der Code nicht mehr typolight 2.7 kompatibel.

Hier nochmal der Link zum Thread:
https://contao.org/board/topic/2238.html

Hinweise erwünscht!

***xchs*** · 09.12.2009, 15:00

Hallo sonnenblume,

also zu Deinem ersten Problem kann ich leider auch nichts dazu sagen.

Was Dein zweites Problem betrifft, so sollte das mit dem geposteten Code funktionieren, so hab ich das nämlich auch bei mir gemacht und es klappt soweit alles bestens...

Du solltest allerdings anstelle von

PHP-Code:


$_GET[]

die TYPOlight-Methode

PHP-Code:


$this->Input->get()

verwenden, da dann auch eine entsprechende Prüfung stattfindet.

**Gandalf** · 19.11.2011, 13:38

ABER: beim Öffnen der neuen Abteilung bleibt der Browser in der Höhe stehen, auf der er gerade war. D.h. Mitarbeiter die weiter oben stehen, sind nicht ohne nach oben scrollen sichtbar. Das ist ziemlich ungünstig, denn man erwartet dass er automatisch an den Anfang des Accordions springt.

Hallo zusammen!

Wollte fragen ob jemand weiß, ob es unterdessen eine Lösung für das oben beschriebene Problem von "sonnenblume" gibt?

Gandalf

**sonja** · 10.04.2012, 19:48

Die Frage ist zwar schon etwas älter - wollte mich aber ebenfalls anschließen, ob jemand bereits eine Möglichkeit gefunden hat, bei Klick auf Accordion (bzw. Toggler) auf den Anfang des Akkordion zu sliden/springen.
Ich habe es im Moment mit einem hard-codierten Anker im Wrapper-Start probiert - sieht aber nicht besonders gut aus und für den Redakteur auch etwas kompliziert zu handlen.

danke für ideen.

**Hagen** · 23.05.2012, 14:42

Hallo Sonja,

wie genau hast du das gemacht? Im Template? Besser eine nicht so schöne als gar keine Lösung...

Danke und schöne Grüße
Hagen

**sonja** · 23.05.2012, 17:51

Hallo Hagen,

Ich habe da einiges probiert und dann alles wieder verworfen, weil ich mit einer anderen Lösung letztlich glücklicher war. Das verworfene kann ich jetzt u.U. nicht mehr ganz rekonstruieren.

Jedenfalls bin ich auf 2 Möglichkeiten gestoßen:
Zu Problem 1 von Sonnenblume:
Um bei langen Inhalten in einem Accordion bei Öffnen/Schließen immer auf den Anfang des geöffneten Elements zu gelangen, habe ich das moo_accordion.xhtml angepasst und diese onComplete:function(el) (rot) hinzugefügt:

Auszug Template:

Code:

    onBackground: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'true');
      toggler.removeClass('active');
      toggler.getNext('div').fade('out').setStyle('visibility', 'hidden');
      toggler.setProperty('aria-expanded', 'false');
      return false;
    },
    
     onComplete:function(el){
     if(el.getSize().y>0){
     el.setStyle('height','auto');}
     el.scrollIntoView(true);
    }

Hat bei mir funktioniert. Nur dass scrollIntoView nicht wirklich scrollt, sondern springt, was dann auch etwas verwirrend ist.

Zu Problem 2 von Sonnenblume:
Einen konkreten Link auf ein Akkordion in einer Seite mit mehreren Akkordion-Elementen zu setzen

Beim Akkordion Wrapper Start in die Bereichsüberschrift den Anker hardcodieren:
<a name="anker1">Hier steht die Bereichsüberschrift</a>
der Link lautet dann deineseite.htm#anker1

Mein Problem war Problem Nr 1 - das habe ich dann aber mit einem anderen Script (eigener Javascript-Code im Seitenlayout) und Link zu anderer motools.js umgesetzt. Kann man hier sehen. Hoffe, das hilft irgendwie weiter...

LG
Sonja

**Hagen** · 31.05.2012, 13:04

Hallo sonja,

vielen Dank für deine Antwort. Ich bin heute erst zum Testen gekommen und habe folgendes herausbekommen: Wenn ich die Funktion onComplete: function(el) in das Template einfüge erreiche ich nur, dass alle Akkordeons geöffnet sind und sich nicht mehr schließen lassen. Nach einigem Herumprobieren bin ich auf die Lösung gekommen, den Inhalt der Funktion in onActive: function(toggler, elem) einzufügen, also so:

Code:

onActive: function(toggler, elem) {
      elem.setProperty('aria-hidden', 'false');
      toggler.addClass('active');
      toggler.getNext('div').setStyle('visibility', 'visible').fade('in');
      toggler.setProperty('aria-expanded', 'true');
      if(elem.getSize().y>0){
       elem.setStyle('height','auto');
      }
      elem.scrollIntoView(true);
      return false;
    },

Jetzt wird beim Öffnen eines Akkordeons immer an den Anfang gesprungen. Ich bin damit zufrieden.

Schöne Grüße
Hagen

**izanagi** · 19.06.2013, 19:40

Hatte vor kurzem das selbe Problem und habe es auch ~~mit der onComplete~~ mit einem Delay umgesetzt.
Damit das ganze etwas weicher gesprungen wird habe ich Mootools dabei verwendet.

Code:

.... ...onActive: function(tog, el) {
        el.setProperty('aria-hidden', 'false');
        tog.addClass('active');
        tog.getNext('div').fade('in');
        tog.setProperty('aria-expanded', 'true');

(function(){ new Fx.Scroll(window).toElementEdge(tog, 'y'); }).delay(600);

        return false;
      },
onBackground: function(tog, el) {
        el.setProper..... ....

**Anke** · 08.07.2013, 19:38

Hallo,

ich habe mit etlichen ergoogelten Teillösungen versucht, das in jAccordion hinzukriegen, z.B. durch Einfügen der rot markierten Zeile im Template, aber das will nicht.

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {

	$(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        active: false
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this)),
	$("div.toggler.active").scrollTop(100);
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
	  });
      });
	})(jQuery);
</script>

Leider bin ich auch (noch) nicht so vertraut mit jQuery oder JS. Kann mir da jemand helfen?

Viele Grüße,
Anke

**izanagi** · 08.07.2015, 02:36

Auch 30 jahre später noch immer aktuell. Komisch das solche DInge nicht mittlerweile selbstverständlich sind und eingebaut wurden.
Für Mootools hatte ich meinen eigenen hack geschrieben vor 2 Jahren, den für jquery wollte ich hier an der Stelle auch nochmal erwähnen weil ich jetzt gerade gebraucht hatte

PHP-Code:


// activate($(this));

 $('html, body').animate({ scrollTop: ($('div.toggler').offset().top)}, 'slow');

 //}).keypress(function(event) {

**Bernator** · 15.09.2015, 17:58

Danke für die jquery Lösung. Leider springt die Seiten dann immer ganz nach oben zum Beginn des ersten Akkordeons. Kann man das auch so hinbekommen, dass die Seite als Top den geöffneten Toggler nimmt? Also so, dass die Überschrift immer Top ist?

Berni

**izanagi** · 18.09.2015, 02:06

Du kannst den aktiven Container ja ansprechen indem du "$(this)" anstatt die Klasse nimmst. Oder einfach die active Klasse

PHP-Code:


$('html, body').animate({ scrollTop: ($(this).offset().top)}, 'slow');

$('html, body').animate({ scrollTop: ($('div.toggler.active').offset().top)}, 'slow');

Das Problem ist das man nur rückwärts von unten dem letzten Accordeon nach oben klicken kann. Von oben nach unten klicken geht nicht, der springt dann leider mittig oder gar unten bis zum footer. Keine Ahnung wieso.

**Per** · 08.11.2016, 14:28

Danke für die jquery Lösung!

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {

	$(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        active: false
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this)),
 $('html, body').animate({ scrollTop: ($('div.toggler.active').offset().top)}, 'slow');  
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
	  });
      });
	})(jQuery);
</script>

31 jahre später noch immer aktuell...

Hat jemand eine Lösung für dieses Problem?:

Das Problem ist das man nur rückwärts von unten dem letzten Accordeon nach oben klicken kann. Von oben nach unten klicken geht nicht, der springt dann leider mittig oder gar unten bis zum footer. Keine Ahnung wieso.

Viele Grüße,
Per

**Andreas** · 09.11.2016, 02:13

Ich weiß nicht genau, was du meinst, hast du mal einen Link dazu? So wie hier müsste das richtig sein.

PHP-Code:


  ...

  $('div.toggler').attr('tabindex', 0);

},

activate: function(event, ui) {

  ui.newHeader.addClass('active');

  ui.oldHeader.removeClass('active');

  $('div.toggler').attr('tabindex', 0);



  // Scroll toggler smooth to top

  if(ui.newHeader.length > 0) {

    $('html, body').animate({

      scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight()

    }, 400);

  }



}

...

activate wird ausgeführt, wenn das Auf-/Zuklappen beendet ist (nicht beim Aufruf der Seite, wenn das Akkordeon inizialisiert wird). ui.newHeader ist der aufgeklappte Toggler. Das IF ist, damit es nicht beim Zuklappen ausgeführt wird. Das - ui.newHeader.outerHeight() sorgt für einen Abstand oben, sodass man den darüberliegenden Toggler sehen kann. Mit der Zahl (400) stellt man die Dauer des Scrollvorgangs ein.

**zoomzoom** · 15.03.2017, 07:12

Hallo Andreas,
ich habe das gleiche Problem wie alle anderen hier. Könntest Du mir bitte sagen, an welcher Stelle Deine Lösung in mein Template eingebaut werden muss? Ich nehme an, es handelt sich um das j_accordion.html5 Template, welches bearbeitet werden muss.

PHP-Code:


<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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

      });

      var activate = function(tog) {

        var tgs = $('div.toggler');

        tgs.removeClass('active');

        tog.addClass('active');

        tgs.next('div.accordion').attr('aria-hidden', 'true');

        tog.next('div.accordion').attr('aria-hidden', 'false');

      };

      $('div.toggler').focus(function() {

        $('div.toggler').attr('tabindex', 0);

        $(this).attr('tabindex', -1);

      }).blur(function() {

        $(this).attr('tabindex', 0);

      }).click(function() {

        activate($(this));

      }).keypress(function(event) {

        if (event.keyCode == 13) activate($(this));

      });

    });

  })(jQuery);

</script>

Ich danke Dir sehr.

**Andreas** · 15.03.2017, 17:00

Der Code bezog sich auf das Template aus 3.5.24 https://github.com/contao/core/blob/...ccordion.html5

Warum du da ein anderes Template hast, weiß ich jetzt nicht, aber aus dieser Info kannst du jetzt ableiten, wo du es einsetzen kannst. Am Ende der activate Funktion.

**tamague** · 07.09.2017, 09:42

eine Frage habe ich dazu
es funktioniert super , aber bei mir versteckt sich der obere Teil da ich eine fixierten Header habe . ich bekomme es nicht hin zum top minus eines bestimmten Wertes zu scrollen ?
Gibt es da eine Möglichkeit?

Zitat von Andreas

Der Code bezog sich auf das Template aus 3.5.24 https://github.com/contao/core/blob/...ccordion.html5

Warum du da ein anderes Template hast, weiß ich jetzt nicht, aber aus dieser Info kannst du jetzt ableiten, wo du es einsetzen kannst. Am Ende der activate Funktion.

Zitat von zoomzoom

Hallo Andreas,
ich habe das gleiche Problem wie alle anderen hier. Könntest Du mir bitte sagen, an welcher Stelle Deine Lösung in mein Template eingebaut werden muss? Ich nehme an, es handelt sich um das j_accordion.html5 Template, welches bearbeitet werden muss.

PHP-Code:


<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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

      });

      var activate = function(tog) {

        var tgs = $('div.toggler');

        tgs.removeClass('active');

        tog.addClass('active');

        tgs.next('div.accordion').attr('aria-hidden', 'true');

        tog.next('div.accordion').attr('aria-hidden', 'false');

      };

      $('div.toggler').focus(function() {

        $('div.toggler').attr('tabindex', 0);

        $(this).attr('tabindex', -1);

      }).blur(function() {

        $(this).attr('tabindex', 0);

      }).click(function() {

        activate($(this));

      }).keypress(function(event) {

        if (event.keyCode == 13) activate($(this));

      });

    });

  })(jQuery);

</script>

Ich danke Dir sehr.

**Andreas** · 07.09.2017, 11:53

Wie sieht denn dein Code aus? Link zur Seite?

**Andreas** · 07.09.2017, 13:00

Du musst die entsprechende Höhe deines oben fixierten Elements beim Scrollen mit einbeziehen.

PHP-Code:


// Scroll toggler smooth to top

if(ui.newHeader.length > 0) {

  $('html, body').animate({

    scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight() - $('header').outerHeight()

  }, 400);

}

Bei diesem Beispiel wird nicht ganz nach oben gescrollt. Es wird die Höhe eines Togglers berücksichtigt, damit ein darüber liegender Toggler, welcher zugeklappt ist, noch sichtbar bleibt - " - ui.newHeader.outerHeight()".

Und die Höhe des oben fixierten Headers wird auch noch abgezogen - " - $('header').outerHeight()".

Vergiss nicht

PHP-Code:


html {

  overflow-y: scroll;

}

Sonst kann das beim Öffnen und Schließen unschön aussehen.

**tamague** · 07.09.2017, 14:15

funktioniert, so wie ich es haben wollte
DANKE
lg Tanja

**soldiver** · 21.09.2017, 14:38

Hallo,

ich habe das selbe Problem. Mein Accordion springt immer weg.

Hier ist die Seite: nordbaecker.de

Wäre sehr erleichtert für Eure Hilfe.

**soldiver** · 22.09.2017, 08:47

Zitat von tamague

funktioniert, so wie ich es haben wollte
DANKE
lg Tanja

Kannst du mir zeigen, wie du das hinbekommen hast. Ich habe das selbe Problem. Mein header ist fixiert und mein accordion wird über position:sticky unter dem header festgehalten. Wenn ich allerdings im accordion runterscrolle und auf das accordion-head anklicke, springt es nach oben, so das das accordion aus dem Sichtfeld ist.

meine Seite ist: nordbaecker.de

Ich bin sehr dankbar, für jeden Vorschlag, der hier weiterhilft.

Lg

**Andreas** · 25.09.2017, 11:28

Das ist eine Wordpress Installation. Bereinige zuerst mal die 98 HTML-Fehler.

Was hast du bereits versucht? Der Code ist so komplex und unübersichtlich, dass du zuerst einmal zeigen solltest, wo du das Accordion initialisierst. Vlt. fragst du da besser mal den Anbieter des Themes.

**mlweb** · 25.09.2017, 12:56

Zitat von Andreas

Das ist eine Wordpress Installation.

Habe ich was verpasst? Übernehmen wir jetzt die Beantwortung von Fragen zu Wordpress?

**soldiver** · 26.09.2017, 12:24

Zitat von Andreas

Das ist eine Wordpress Installation. Bereinige zuerst mal die 98 HTML-Fehler.

Was hast du bereits versucht? Der Code ist so komplex und unübersichtlich, dass du zuerst einmal zeigen solltest, wo du das Accordion initialisierst. Vlt. fragst du da besser mal den Anbieter des Themes.

Hallo Andreas,

stimmt --> habe ich über Wordpress aufgebaut ;-).

Mit Contao kenne ich mich nicht aus.

Danke für Hinweis --> viele Fehler sind schnell beseitigt.

Mein Accordion (#accordions-196) wird unterteilt hier in 4 Accordion-Kategorien(.accordion-head) (auf der Webseite sind es:Brot, Brötchen, Kuchen, Snacks). Dem ".accordion-head" habe ich eine "position:sticky" und "top: 210px" vergeben, so dass nach oben hin Abstand wegen des headers ist.

Hatte gelesen, dem Accordion eine feste Höhe zu vergeben, aber meine .accordion-content hat unterschiedlichen Inhalt.

Mit dem JS-Code habe ich meine Probleme. Wie sollte der Code aussehen:

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: 'div.toggler', active: false,
collapsible: true
});
var activate = function(tog) {
var tgs = $('div.toggler');
tgs.removeClass('active');
tog.addClass('active');
tgs.next('div.accordion').attr('aria-hidden', 'true');
tog.next('div.accordion').attr('aria-hidden', 'false');
};
$('div.toggler').focus(function() {
$('div.toggler').attr('tabindex', 0);
$(this).attr('tabindex', -1);
}).blur(function() {
$(this).attr('tabindex', 0);
}).click(function() {
activate($(this));
}).keypress(function(event) {
if (event.keyCode == 13) activate($(this));
});
});
})(jQuery);
</script>

nordbaecker.de

Lieben Dank

**Andreas** · 26.09.2017, 13:59

Feste Höhe, hast du aber nicht hier in diesem Thread gelesen, das dürfte auch nichts zur Sache tun.

Präsentiere deinen Code bitte sauber:

PHP-Code:


(function($) {

  $(document).ready(function() {

    $(document).accordion({

      // Put custom options here

      heightStyle: 'content',

      header: 'div.toggler',

      active: false,

      collapsible: true

    });

    var activate = function(tog) {

      var tgs = $('div.toggler');

      tgs.removeClass('active');

      tog.addClass('active');

      tgs.next('div.accordion').attr('aria-hidden', 'true');

      tog.next('div.accordion').attr('aria-hidden', 'false');

    };

    $('div.toggler').focus(function() {

      $('div.toggler').attr('tabindex', 0);

      $(this).attr('tabindex', -1);

    }).blur(function() {

      $(this).attr('tabindex', 0);

    }).click(function() {

      activate($(this));

    }).keypress(function(event) {

      if (event.keyCode == 13) activate($(this));

    });

  });

})(jQuery);

Wo hast du den Code her? activate() wird eigentlich mit 2 Parametern aufgerufen
http://api.jqueryui.com/accordion/#event-activate

PHP-Code:


var activate = function(event, ui) {

Ansonsten steht alle bereits oben, wie du die Scrollfunktion in die Funktion activate() einfügst.

ui und newHeader sind Objekte des Accordions, also egal ob Wordpress oder Contao.

$('header') musst du natürlich an dein Markup anpassen.

Wenn du mal eine abgespeckte Version der Seite zeigst, wo nicht so viel JS geladen wird, mit nem sauberen Markup, dann kann man da wahrscheinlich auch helfen.

**soldiver** · 27.09.2017, 09:44

Zitat von Andreas

Feste Höhe, hast du aber nicht hier in diesem Thread gelesen, das dürfte auch nichts zur Sache tun.

Präsentiere deinen Code bitte sauber:

PHP-Code:


(function($) {

  $(document).ready(function() {

    $(document).accordion({

      // Put custom options here

      heightStyle: 'content',

      header: 'div.toggler',

      active: false,

      collapsible: true

    });

    var activate = function(tog) {

      var tgs = $('div.toggler');

      tgs.removeClass('active');

      tog.addClass('active');

      tgs.next('div.accordion').attr('aria-hidden', 'true');

      tog.next('div.accordion').attr('aria-hidden', 'false');

    };

    $('div.toggler').focus(function() {

      $('div.toggler').attr('tabindex', 0);

      $(this).attr('tabindex', -1);

    }).blur(function() {

      $(this).attr('tabindex', 0);

    }).click(function() {

      activate($(this));

    }).keypress(function(event) {

      if (event.keyCode == 13) activate($(this));

    });

  });

})(jQuery);

Wo hast du den Code her? activate() wird eigentlich mit 2 Parametern aufgerufen
http://api.jqueryui.com/accordion/#event-activate

PHP-Code:


var activate = function(event, ui) {

Ansonsten steht alle bereits oben, wie du die Scrollfunktion in die Funktion activate() einfügst.

ui und newHeader sind Objekte des Accordions, also egal ob Wordpress oder Contao.

$('header') musst du natürlich an dein Markup anpassen.

Wenn du mal eine abgespeckte Version der Seite zeigst, wo nicht so viel JS geladen wird, mit nem sauberen Markup, dann kann man da wahrscheinlich auch helfen.

================================================== ====
Hi Andreas,

vielen Dank für deine Antworten.

Denke meine Latein ist hier am Ende. Ich komme hier leider nicht mehr weiter. :-(

Ich hatte diesen Code reinkopiert:

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="cross origin="anonymous"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({

// Put custom options here
heightStyle: 'content',
header: '#masthead',
collapsible: true,
create: function(event, ui) {
ui.header.addClass('active');
$('#masthead').attr('tabindex', 0);

},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('#masthead').attr('tabindex', 0);
}
// Scroll toggler smooth to top
if(ui.newHeader.length > 0) {
$('html, body').animate({
alert('hallo');
scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight() - $('header').outerHeight()
}, 400);
}
});

});
})(jQuery);
</script>

(Die erste alert Ausgabe wird angezeigt. Die Ausgabe beim smooth to top nicht)

allerdings weiss ich nicht, wo ich deine if-Anweisung reinkopieren soll.

Ich hatte jetzt eine andere Idee --> wenn ich mich im Accordion bewege und dann auf den "nav" Button "Produkte" klicke, geht es auf die richtige Startposition. Nun habe ich auf die jeweiligen accordion-heads den selben Link gesetzt, wie bei dem "Produkte Button", geht leider auch hier nicht??!

**Andreas** · 27.09.2017, 10:34

Du hast deinen Code schon wieder nicht sauber präsentiert. Das Zitat von mir kannst du löschen, steht doch direkt darüber.

**soldiver** · 27.09.2017, 13:59

Zitat von Andreas

Du hast deinen Code schon wieder nicht sauber präsentiert. Das Zitat von mir kannst du löschen, steht doch direkt darüber.

Hi Andreas,

Bin da recht unerfahren mit codieren, wie du bemerkt hast.

PHP-Code:


<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="crossorigin="anonymous"></script>

<script>

  (function($) {

    $(document).ready(function() {

      $(document).accordion({



        // Put custom options here

        heightStyle: 'content',

        header: '#masthead',

        collapsible: true,

        create: function(event, ui) {

          ui.header.addClass('active');

          $('#masthead').attr('tabindex', 0);

    

        },

        activate: function(event, ui) {

          ui.newHeader.addClass('active');

          ui.oldHeader.removeClass('active');

          $('#masthead').attr('tabindex', 0);                              

        }

          // Scroll toggler smooth to top 

        if(ui.newHeader.length > 0) { 

        $('html, body').animate({ 

        alert('hallo');

        scrollTop: ui.newHeader.offset().top - ui.newHeader.outerHeight() - $('header').outerHeight() 

        }, 400); 

        }

      });

 

    });

  })(jQuery);

</script>

Woran könnte es deiner Meinung nach liegen, dass es nicht klappt.

Lieben Dank

**soldiver** · 27.09.2017, 14:07

Zitat von tamague

funktioniert, so wie ich es haben wollte
DANKE
lg Tanja

Hi,

Könntest du mir die Seite nennen, die du gemacht, mit dem Accordion. Evtl. könnte ich es so für meine Seite ableiten.

Liebe Grüße

**Andreas** · 27.09.2017, 18:39

Es von den Posts hier oben abzuleiten ist viel einfacher. Du hast das Scrollen nicht in die Funktion activate() eingebaut. Siehe #19.

PHP-Code:


activate: function(event, ui) {



  // hier kommt das hin, was bei activate ausgeführt werden soll



}

BTW: Du hast den Code nicht in die Seite eingefügt.

Edit: Und hier ist das Core Template von Contao mit welchem das Accordion initialisiert wird. https://github.com/contao/core/blob/...ccordion.html5