URL link to an anchor point in an Accordion index tap

I Need Help
1

Hi all

Can someone help me with this problem, and what code I need to make this possible? I am an absolute newbie when it comes to writing code.

initial situation:
I have a website with multi-pages. On page 1(Home/index.html), I have an Accordion Bric with 3 index tabs.
In the header Bloc, I have a navigation menu that should link to the content in the Accordion index taps. That should work from the page with the accordion and also from my other web pages.
I already have given the first picture in every Accordion index tap an ID to use it as an anchor point.
My 3 links are now: "./index.html#dw-section“, "./index.html#dopcw-section“ and “./index.html#dopnw-section”

Problem:
This only works if the Accordion-index-tap is already open, not when it is closed and only within the index page.

Thanks to everyone who takes some time for a solution :pray:t2::pray:t2:

Accordion
Accordion1800×1039 216 KB

2

I found a solution that works from all my pages, except I click the link from the index.html where the accordion is located. If I click the link from this page, I need to reload the site; then the required Accordion index tap is open.

What I’ve done is used the Div container ID from the card body for the URL links. In my case:
./index.html#accordion-14913-item-2
./index.html#accordion-14913-item-3
./index.html#accordion-14913-item-4

and inserted the script code to the page footer:

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

To solve the problem, is there a way to add the reload command to the script?

3

The script that has worked for me.
For all who search for a solution with a similar problem:

  <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");
            const dest = $('#' + hash).prev().offset().top;
            $(document).scrollTop(dest);
        });
    </script>