Opening a Bootstrap 4 accordion panel via URL on another page

Question

I've spent about a month (on and off) trying out the other replies to this similar question, but to no avail. Most recently this one: Opening Bootstrap 4 accordions using URL but I have gone through the first six pages of Google results on SOF (search string: linking to a section of an accordion from another page bootstrap 4).

I'm using Bootstrap Studio to generate the site in question. It allows some custom code and you can add JavaScripts to it, but I don't have access to all the JS and JQuery files used.

I have: index.html with a "read more" button link to about.html. About.html includes an accordion with four related topics. I would like the "read more" link on index.html to jump to and open the third card on about.html. This is a section of the accordion code; there are a number of possibly superfluous IDs and/or classes because I've tried about 6 different methods to get this to work.

    <div role="tablist" id="aboutpage">
      <div class="card">
        <div class="card-header" role="tab">
          <h5 class="mb-0">
            <a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-1" href="div#aboutpage .item-1" id="history" class="collapsed">History of EPSCoR<i class="fas fa-chevron-down pull-right"></i></a></h5>
        </div>
        <div class="collapse item-1" role="tabpanel" data-parent="#aboutpage">
          <div class="card-body">
            <p>The Experimental Program to Stimulate Competitive Research (EPSCoR) was established by the National Science Foundation (NSF) in 1979. The program goal: to strengthen U.S. research and education in science and engineering.<br /></p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" role="tab">
          <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-2" href="div#aboutpage .item-2" id="nh-history" class="collapsed">New Hampshire NASA EPSCoR<i class="fas fa-chevron-down pull-right"></i></a></h5>
        </div>
        <div class="collapse item-2" role="tabpanel" data-parent="#aboutpage">
           <div class="card-body">
 <p>In 2004, the National Science Foundation designated New Hampshire an EPSCoR state. That EPSCoR designation then qualified New Hampshire researchers and research jurisdictions to apply for EPSCoR funds from federal agencies with
 EPSCoR programs—NASA being one of those agencies.<br /></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header accordion-collapse in" role="tab" id="initiatives">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-3" href="div#aboutpage .item-3" class="collapsed">NASA EPSCoR Initiatives<i class="fas fa-chevron-down pull-right"></i></a></h5>
</div>
<div class="collapse item-3" role="tabpanel" data-parent="#aboutpage">
<div class="card-body">
<div>
<p>The NASA <strong>Experimental Program to Stimulate Competitive Research</strong>, or <strong>EPSCoR</strong>, is a merit-based program designed to strengthen research capabilities in jurisdictions not equably participating
 in competitive aerospace and aerospace-related research activities. </p>
</div><a href="div#aboutpage .item-3" id="initiatives" aria-controls="aboutpage .item-3" data-toggle="collapse"><i class="fa fa-chevron-up pull-right"></i></a></div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="aboutpage .item-4" href="div#aboutpage .item-4" id="tac" class="collapsed">Advisory Committee<i class="fas fa-chevron-down pull-right"></i></a></h5>
</div>
<div class="collapse item-4" role="tabpanel" data-parent="#aboutpage">
<div class="card-body">
<div>
<p>[Advisory committee members</p></div><a href="div#aboutpage .item-4" id="tac" aria-controls="aboutpage .item-4" data-toggle="collapse"><i class="fa fa-chevron-up pull-right"></i></a></div>
</div>
</div>
</div>
</div>
</div>

I've tried pretty much all of the Bootstrap 4 examples I found on SOF, as well as this: http://foundationphp.com/tutorials/jqui_specific.php (though that's for an older version of Bootstrap and also assumes you can edit the code that initializes the accordion). This is the Javascript from foundationphp, which I realize isn't going to work because it's targeting a panel, not a card:

 <script type="text/javascript">
function getParam(name) {
    var query = location.search.substring(1);
    if (query.length) {
        var parts = query.split('&');
        for (var i = 0; i < parts.length; i++) {
            var pos = parts[i].indexOf('=');
            if (parts[i].substring(0,pos) == name) {
                return parts[i].substring(pos+1);
            }
        }
    }
    return 0;
}
</script>
<script type="text/javascript">
$(function() {
    var defaultPanel = parseInt(getParam('panel'));
    $( "#aboutpage" ).accordion(
        {active: defaultPanel}
    ); 
});
</script>

The link from index.html is currently formatted like this:

about.html?panel=2#aboutpage

My coding skill level is at a pretty basic "copy/paste/hope it works" level, for what that's worth.