I have a page with a Bootstrap Accordion. I would like to link to one of the specific options from another page. So when the visitor clicks this link it will load the accordion page and automatically open the correct option.

So on my link page I have an href link that ends with the tag #collapseGeneralThree. My sample code is shown below:

<div id="accordionGeneral" class="accordion">
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralOne" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralOne" aria-expanded="false" aria-general="collapseGeneralOne">GeneralOne Title</button>
    </h2>
    <div id="collapseGeneralOne" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralOne" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralOne Content.</div>
    </div>
</div>
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralTwo" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralTwo" aria-expanded="false" aria-general="collapseGeneralTwo">GeneralTwo Title</button>
    </h2>
    <div id="collapseGeneralTwo" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralTwo" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralTwo Content.</div>
    </div>
</div>
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralThree" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralThree" aria-expanded="false" aria-general="collapseGeneralThree">GeneralThree Title</button>
    </h2>
    <div id="collapseGeneralThree" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralThree" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralThree Content.</div>
    </div>
</div>

I then have a piece of Javascript running on this page placed just above the tag:

  // Opens accordion automatically if an accordion target is accessed from another page
    // Assumes the accordion-group is the target linked to
    function openAnchorAccordion() {
    if (window.location.hash) {
    var jQuerytarget = jQuery('body').find(window.location.hash);
    //console.log( jQuerytarget );
    if (jQuerytarget.hasClass('collapse')) {
    var jQuerytargetAccordion = jQuerytarget.find('.collapse');
    console.log( jQuerytargetAccordion );
    jQuerytarget.collapse('show');
    }
    }
    }
    openAnchorAccordion();

I can see in the console log if finds the correct tag but cannot figure out why it is not then adding the show class to the releevant div.

Can anyone help?

Thanks