How can I keep an accordion collapse or open inside a nav-tab after page refresh using Bootstrap 4 and Jquery?

How can I keep an accordion collapse or open inside a nav-tab after page refresh using Bootstrap 4 and Jquery?

I'm trying to mix Bootstrap 4 Nav-tab and Accordion. My nav-tab is working properly after page refresh it stays on the active tab and I want to do the same with the accordion. I want the keep the active accordion open or collapse when the page was refresh.

  2. <ul class = "nav nav-tabs">
  3. <li class = "nav-item"><a href = "#monitor" data-toggle = "tab" class = "nav-link active">Book Monitoring</a></li>
  4. <li class = "nav-item"><a href = "#history" data-toggle = "tab"class = "nav-link">Book's History</a></li>
  5. </ul>
  6. <!-- STARTS OF NAV-TAB -->
  7. <div class = "tab-content">
  8. <div class = "tab-pane container active" id = "monitor">
  9. <br />
  10. <h5>Monitoring of Books </h5>
  11. </div>
  13. <div class = "tab-pane container" id = "history">
  14. <br />
  15. <h5>History of Borrowed Books</h5>
  17. <!-- STARTS OF ACCORDION -->
  18. <div id = "accordion">
  19. <div class = "card">
  20. <div class = "card-header">
  21. <a href = "#stud_collapse" class = "card-link" data-toggle = "collapse">Borrowed by Students</a>
  22. </div>
  23. <div class = "collapse" id = "stud_collapse" data-parent = "#accordion">
  24. <div class = "class-body">
  25. Student's Data  (Form and Tables Here)
  26. </div>
  27. </div>
  28. </div>
  30. <div class = "card">
  31. <div class = "card-header">
  32. <a href = "#teach_collapse" class = "card-link" data-toggle = "collapse">Borrowed by Teachers</a>
  33. </div>
  34. <div class = "collapse" id = "teach_collapse" data-parent = "#accordion">
  35. <div class = "class-body">
  36. Teacher's Data (Form and Tables Here)
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>

  45. <script>
  46. $(function() {
  47. //This is working properly for the Bootstrap Nav-Tab
  48. $('a[data-toggle="tab"]').click(function (e) {
  49. e.preventDefault();
  50. $(this).tab('show');
  51. });

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

  58. var selectedTab = localStorage.getItem('selectedTab');
  59. if (selectedTab != null) {
  60. $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
  61. }
  63. //This is what Ive tried but NOT working for the Bootstrap Accordion (collapsible), I tried to edit the code above for the accordion but no luck:

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

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

  75. var selectedAccordion = localStorage.getItem('selectedAccordion');
  76. if (selectedAccordion != null) {
  77. $('a[data-toggle="collapse"][href="' + selectedAccordion + '"]').collapse('show');
  78. }
  79. });
  80. </script>