Javascript - Öffnen eines Accordions über Ankerlink

[savuti]

Hallo,

meine Javascriptscriptkenntnisse reichen hier nicht aus und die Lösungen die ich im Netz gefunden habe, funktionieren nicht. Ich habe hier Links zu mehreren Accordions zu denen per Anker mit smoothscroll gescrollt wird. Alle Accordions sind geschlossen, die Links und die Accordions sind auf einer Seite. Ich hätte gern, wenn ich auf einen Link klicke, dass, zusätzlich zum Hinscrollen, das entsprechende Accordion geöffnet wird.

Die Links sehen so aus:

<a href="#name1">
<a href="#name2">
<a href="#name3">

etc.

Die Accordions so:

<section class="ce_accordionSingle ce_accordion ce_text block" id="name1">
<section class="ce_accordionSingle ce_accordion ce_text block" id="name2">
<section class="ce_accordionSingle ce_accordion ce_text block" id="name3">

etc.

Wenn ich das richtig verstanden habe, müsste man den hash des Links bei Klick splitten, also aus "#name1" "name1" werden und dann ein "click" auf den header des entsprechenden Accordions gegeben werden. Klingt machbar, aber für mich ist das irgendwie Hexenwerk...
Richtig fein wäre es, wenn erst das Accordion geöffnet werden würde, wenn an die richtige Position gescrollt wurde - das aber nur als "Bonus".

Kann jemand helfen?

Grüße,
Christian

[savuti]

Hab jetzt etwas zum Laufen bekommen, zwar nicht besonders schön, aber es geht.

Nach dem Schema von oben:

<script>
jQuery(function ($) {
    $('#link-wrapper .name1 a').on('click', function(event){
        $('#accordion-wrapper #name1 .toggler').click();
    });
    $('#link-wrapper .name2 a').on('click', function(event){
        $('#accordion-wrapper #name2 .toggler').click();
    });
    $('#link-wrapper .name3 a').on('click', function(event){
        $('#accordion-wrapper #name3 .toggler').click();
    });
});
</script>

Wobei ".name1" das umschliessende Element des Links "#name1" ist.

So muss ich zwar für jeden Link eine drei Zeilen schreiben, aber es geht erstmal. Mit Variablen wäre es schöner...

Grüße,
Christian

[folkfreund]

Hi Christian,
die von dir genannte Lösung könnte man sicher automatisieren; mal überlegen...

Richtig fein wäre es, wenn erst das Accordion geöffnet werden würde, wenn an die richtige Position gescrollt wurde - das aber nur als "Bonus".

Und diesen Satz verstehe ich nicht. Wo auf der Seite stehen denn die Links, die das Akkordeon öffnen sollen? Vor, hinter neben oder innerhalb des Akkordeons? Und bei welcher Scrollposition soll was passieren?

Prinzipiell würde so etwas funktionieren wie bei eine OnePager-Navigation, die sich abhängig von der Scrollposition updated.

Gruß, folkfreund

[savuti]

Hallo folkfreund,

das ganze passiert schon auf einem Onepager (benutze die Erweiterung onepagewebsite, aber mit einem anderen Javascript - onepagenav).

Die Links sind relativ weit oben auf der Webseite, die Accordeons mit Abstand darunter. Wenn man nun oben auf einen Link klickt, scrollt die Seite runter bis zum Accordeon, welches aber nun schon offen ist. Schön wäre es, wenn es bis zum Accordeon scrollt und sich erst dann das Accordeon öffnet. Wäre ein schöner Effekt.

Schönen Abend,
Christian

Edit: Die Sache mit dem Timer: Das muss gar nicht so kompliziert sein. Meine "Funktion" "befeuert" nicht direkt das Accordeon, sondern wartet auf einen Trigger. Wenn die Seite "fertig gescrollt ist" ist das Accordeon am oberen Ende des Viewports und das kann man abfangen, Stichwort Sticky Menu. Das wäre dann auch gleich der Trigger.

abgewandeltes Sticky Menu ganz grob:

        $(window).scroll(function(){
                if( $(window).scrollTop() > #accordeon-wrapper #name1 ) {
                        $('#accordeon-wrapper #name1 .toggler').click();}

Das müsste dann aber auch am besten mit Variablen laufen...


Zu den Variablen für das Öffnen der Accordeons:

Die Links haben alle .link.

Wenn jetzt auf das Element .link a geklickt wird, dann muss die Funktion die Klasse die das Element hat als Variable "anchorlink" nehmen (.name1, .name2 oder .name3), dann einmal hier einfügen:

$('#link-wrapper .anchorlink a').on('click', function(event)

und einmal ohne Punkt und dafür mit #hier einfügen:

$('#accordeon-wrapper #anchorlink .toggler').click();

Zusammen mit dem "Timer" ganz ganz grob (die dritte und vierte Zeile ist die große Frage):

jQuery(function ($) {
    $('#link-wrapper .link a').on('click', function(event){
        var anchorlink = $(this).attr("href");
        anchorlink = anchorlink.substring(1);
              $('#link-wrapper .anchorlink a').on('click', function(event){
                     $(window).scroll(function(){
                           if( $(window).scrollTop() > #accordeon-wrapper #anchorlink ) {
                                  $('#accordeon-wrapper #anchorlink .toggler').click();}

Könnte das so funktionieren?

[folkfreund]

Könnte das so funktionieren?

Versuch macht klug

Vielleicht hilft dir auch das hier weiter bei deiner Linkautomatisierung:
https://community.contao.org/de/show...l=1#post385832

[Bennie]

Was das Anspringen des Akkordeons betrifft so habe ich das j_accordion.html5 template um diesen Teil erweitert

$('div.toggler').each(function() {
    if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) {
        $(this).click();
    }
}); 

und damit alle zunächst geschlossen bleiben active: false gesetzt.
Vielleicht hilft Dir das , wie gesagt zumindest das Anspringen mit ID lies sich so einfach lösen. Ich habe das mal benötigt für Links von anderen Seiten auf ein Akkordeon.