Как сохранить аккордеон открытым во вкладке nav после обновления страницы, используя Bootstrap 4 и Ajax

Question

Я пытаюсь держать активный аккордеон открытым во вкладке nav после обновления страницы. Моя навигационная вкладка работает правильно после обновления страницы, я имею в виду, что она уже остается на активной вкладке. Но когда я щелкаю свой «Второй» элемент аккордеона и обновляю страницу, он автоматически закрывается. Заранее спасибо.

//KEEP THE ACTIVE NAV-TAB OPEN AFTER PAGE REFRESH
$('a[data-toggle="tab"]').click(function (e) {
	e.preventDefault();
	$(this).tab('show');
});

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
	var id = $(e.target).attr("href");
	localStorage.setItem('selectedTab', id)
});

var selectedTab = localStorage.getItem('selectedTab');
	if (selectedTab != null) {
		$('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
	}

<ul class = "nav nav-tabs">
	<li class = "nav-item"><a href = "#monitor" data-toggle = "tab" class = "nav-link active">Book Monitoring</a></li>
	<li class = "nav-item"><a href = "#history" data-toggle = "tab"class = "nav-link">Book's History</a></li>
</ul>
<div class = "tab-content">
				
	<div class = "tab-pane container active" id = "monitor">
		<br />
		<h5>Monitoring of Books</h5>
	</div>
					
	<div class = "tab-pane container" id = "history">
		<br />
		<h5>History of Borrowed Books</h5>
						
	<!-- STARTS OF ACCORDION -->
	<div id = "accordion">
		<div class = "card">
			<div class = "card-header">
				<a href = "#stud_collapse" class = "card-link" data-toggle = "collapse">Borrowed by Students</a>
			</div>
				<div class = "collapse" id = "stud_collapse" data-parent = "#accordion">
					<div class = "class-body">
						Student's Data 
					</div>
				</div>
		</div>
		
		<div class = "card">
			<div class = "card-header">
				<a href = "#teach_collapse" class = "card-link" data-toggle = "collapse">Borrowed by Teachers</a>
			</div>
				<div class = "collapse" id = "teach_collapse" data-parent = "#accordion">
					<div class = "class-body">
						Teacher's Data
					</div>
				</div>
		</div>
	</div>
</div>
</div>

Это то, что я пытался держать активным аккордеоном открытым "внутри навигационной вкладки", но оно не работает:

    $('a[data-toggle="collapse"]').click(function (e) {
        e.preventDefault();
        $(this).collapse('show');
    });

    $('a[data-toggle="collapse"]').on("shown.bs.collapse", function (e) {
        var id = $(e.target).attr("href");
        localStorage.setItem('selectedAccordion', id)
    });

    var selectedAccordion = localStorage.getItem('selectedAccordion');
    if (selectedAccordion != null) {
        $('a[data-toggle="collapse"][href="' + selectedAccordion + '"]').collapse('show');
    }