Retain Accordion State on Postback

Question

I have a question about retaining the state of the collapsed panels on postback within an accordion. I just need to make the page operate so that after a postback, the accordion state appears unmodified.

I've tried using a hidden field as per: Bootstrap accordion prevent collapse on postback in asp.net

and also using jquery cookie and following the advice here, even in regards to updating the JS due to bootstrap 4 changes. Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

So importing this js: https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js

And using the code below:

Using .NET Core and Razor pages. html

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Anim pariatur cliche reprehenderit
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                Anim pariatur cliche reprehenderit,
            </div>
        </div>
    </div>
</div>

<form method="get">
    <button>Hi</button>
</form>

jquery

  $(document).ready(function () {
        //when a group is shown, save it as the active accordion group
        $("#accordion").on('shown.bs.collapse', function () {
            var active = $("#accordion .show").attr('id');
            $.cookie('activeAccordionGroup', active);
          //  alert(active);
        });
        $("#accordion").on('hidden.bs.collapse', function () {
            $.removeCookie('activeAccordionGroup');
        });
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#accordion .panel-collapse").removeClass('show');
            //show the account_last visible group
            $("#" + last).addClass("show");
        }
    });

No errors messages, it just doesn't work unfortunately. Any help or advice will be greatly received.