URL link zu einem Accordion Reiter

TomBad · 8. Mai 2021

Hi

Kann mir jemand bei diesem Problem helfen?

Ich bin ein absoluter Neuling, wenn es darum geht, Java script Code zu schreiben und lern es erst gerade, habt also noch etwas nachsicht mit mir.

Ausgangssituation:

Ich habe auf meiner Hauptwebseite ( index.html) ein Akkordeon mit 3 Registerkarten.

In meiner Webseiten-Kopfzeile ist ein Navigationsmenü, das auf die verschiedenen Akkordeon-Index-Taps verweist.

Dazu hatte ich den div-container des jeweiligen card body eine ID vergeben und als hash für den URL-Links verwendet.

In meinem Fall:

./index.html#accordion-14913-item-2

./index.html#accordion-14913-item-3

./index.html#accordion-14913-item-4

und dem Page footer den Skriptcode eingefügt:

if (location.hash !== null && location.hash !== "") {

$(location.hash + ".collapse").collapse("show");

}

</script>

Es funktioniert, wenn:

- Ich den Link von einer meiner anderen Seite aus klicke.

- Ich den link von der Seite mit dem Accordion in einem neuen Browser Tap öffnen lasse oder

- Ich den link von der Seite mit dem Accordion klicke und danach den reload im Browser manuell auslöse.

Problem:

Wie erreiche ich es, dass es auch funktioniert, wenn der Link auf der Webseite geklickt wird, auf der sich das Accordion befindet,

ohne den reload manuell auslösen zu müssen?

Sempervivum · 9. Mai 2021

Ich nehme mal an, deine Links sehen so aus:

<a href="./index.html#accordion-14913-item-2">Der Linktext</a>

Dann sollte es so funktionieren:

Code

$('a[href*="#accordion"]').on('click', event =>
    const hash = event.target.href.split('#')[1];
    const $('#' + hash + ".collapse").collapse("show");
});

aber ungetestet

TomBad · 9. Mai 2021

@Sempervivum Danke für deine schnelle Antwort. Ich hab deinen Script code getestet, aber in meinem Fall funktioniert er nicht. Weder wenn ich den link von einer meiner anderen Seiten aufrufe noch von der Seite mit dem Accordion. Trotzdem vielen Dank für deinen Einsatz.

mein Link sieht folgendermassen aus:

Code

<li class="nav-item">
                                <a href="./index.html#accordion-14913-item-2" class="nav-link a-btn">Director</a>
                            </li>

Sempervivum · 9. Mai 2021

Da müsste man jetzt sehen, wie dieses Akkordeon aufgebaut ist, um es zu untersuchen. HTML und CSS.

Sempervivum · 9. Mai 2021

PS: Ich sehe gerade, dass in dieser Zeile das const nicht hin gehört, lösche es:

const $('#' + hash + ".collapse").collapse("show");

Sempervivum · 9. Mai 2021

Als ich die Endung sah, dachte ich zunächst OMG, aber es war dann glücklicher Weise nur Text drin. Wie ich sehe ist das Bootstrap. Ich habe mal die Dateien von Bootstrap 4 eingebunden und damit funktioniert es.

Mein Javascript war auch gar nicht so verkehrt, jedoch fehlte eine öffnende Klammer und das event.preventDefault(). Ohne letzteres wird die Seite neu geladen und das Akkordeon ist gleich wieder zu.

Dieses funktioniert auf meiner Testseite:

Code

        $('a[href*="#accordion"]').on('click', event => { // <--- öffnende Klammer fehlte
            event.preventDefault(); // <--- dieses fehlte
            const hash = event.target.href.split('#')[1];
            $('#' + hash + ".collapse").collapse("show");
        });

Sempervivum · 9. Mai 2021

Dort kann ich mein Javascript nicht finden?

Sempervivum · 9. Mai 2021

Ich hätte es gleich vollständig posten sollen:

1. Da fehlen die script-Tags.

2. Das bisherige Javascript muss erhalten bleiben.

3. Das preventDefault muss drin sein, sonst wird die Seite neu geladen.

So sollte es funktionieren:

Code

    <script>
        if (location.hash !== null && location.hash !== "") {
            $(location.hash + ".collapse").collapse("show");
        }

        $('a[href*="#accordion"]').on('click', event => {
            event.preventDefault();
            const hash = event.target.href.split('#')[1];
            $('#' + hash + ".collapse").collapse("show");
        });
    </script>

Alles anzeigen

TomBad · 9. Mai 2021

Mein Fehler, Entschuldigung.

Es funktioniert. Ich habs nochmals hochgeladen. Erst mal 1000 Dank für den Einsatz und all die Hilfe.

Das einzige was es nicht macht ist zu dem Punkt des Accordions steuern/scrollen, wenn ich schon auf der Seite des accordion bin.

Danke nochmals

Sempervivum · 9. Mai 2021

Oh, daran habe ich jetzt nicht gedacht: Durch das preventDefault() wird auch das Scrollen zu dem betr. Container unterdrückt. Ich werde da etwas hinzu fügen ...

Sempervivum · 9. Mai 2021

Versuche dies:

Code

    <script>
        if (location.hash !== null && location.hash !== "") {
            $(location.hash + ".collapse").collapse("show");
        }

        $('a[href*="#accordion"]').on('click', event => {
            event.preventDefault();
            const hash = event.target.href.split('#')[1];
            $('#' + hash + ".collapse").collapse("show");
            // Zielposition fuer das Scrollen zum
            // betr. Container ermitteln:
            const dest = $('#' + hash).prev().offset().top;
            // und dort hin scrollen:
            $(document).scrollTop(dest);
        });
    </script>

Alles anzeigen

Man könnte noch ein geschmeidiges Scrollen erzielen durch eine Animation.

TomBad · 9. Mai 2021

Ja das funktioniert ganz gut. Hab's nochmals hochgeladen.

Vielen vielen Dank.

Sempervivum · 9. Mai 2021

"ganz gut" trifft es: Leider nicht ganz perfekt, weil das Element zwar sichtbar wird, aber nicht vollständig. Das liegt daran, dass das Aufklappen animiert ist und das Scrolling statt findet, wenn es noch zu ist. Dazu fällt mir auf Anhieb keine Lösung ein, nur eine unschöne, indem man die Seite nach unten hin verlängert.

TomBad · 9. Mai 2021

Gibt es eine Möglichkeit das scrollen um 1 sec zu verzögern? Ich hatte dazu mal eine Funktion gesehen, dachte ich zumindestens.

Aber ich bin schon sehr glücklich, das es so klappt. Danke

Sempervivum · 9. Mai 2021

Ja, das Verzögern geht selbstverständlich, ich habe es mal in Verbindung mit der Animation gemacht:

Code

    <script>
        if (location.hash !== null && location.hash !== "") {
            $(location.hash + ".collapse").collapse("show");
        }

        $('a[href*="#accordion"]').on('click', event => {
            event.preventDefault();
            const hash = event.target.href.split('#')[1];
            $('#' + hash + ".collapse").collapse("show");
            // Zielposition fuer das Scrollen zum
            // betr. Container ermitteln:
            const dest = $('#' + hash).prev().offset().top;
            // und dort hin verzoegert und animiert scrollen:
            $("html, body").stop(true, true).delay(1000).animate({ scrollTop: dest }, 500);
        });
    </script>

Alles anzeigen

TomBad · 9. Mai 2021

Ich habs mal auf eine halbe sec (500) verkürzt, das fühlt sich natürlicher an und hochgeladen.

Funktioniert sauber, wenn beim auslösen alle Accordion Taps geschlossen sind. Ich glaub,

wenn man das noch vor das öffnen des entsprechenden Reiter setzt, müsste es passen.

Nochmals vielen Dank, dass Du deinen kompletten Sonntag dafür opferst.

URL link zu einem Accordion Reiter

Jetzt mitmachen!

Teilen