changed reloading to ajax content replace

assets/css/styles.css

@@ -913,6 +913,10 @@ select {
   --tw-backdrop-sepia: ;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .fixed {
   position: fixed;
 }
@@ -1602,6 +1606,14 @@ select {
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
@@ -2006,7 +2018,16 @@ body.login {
 }
 
 #content-container {
-  transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+}
+
+.active #content-container {
+  opacity: 0; /* Initial opacity when collapsing */
+  transition: opacity 0.3s ease-in-out; /* Adjust the duration and timing function as needed */
+}
+
+.active #content-container.visible {
+  opacity: 1; /* Opacity when expanding */
 }
 
 #footer-nav.out-of-view {

assets/js/index.js

@@ -15,9 +15,22 @@ __webpack_require__.r(__webpack_exports__);
 class CollapsePanel {
   constructor() {
     this.toggles = document.querySelectorAll('.accordion-toggle');
-    this.toggleCollapse();
+    this.init();
   }
-  toggleCollapse() {
+  init() {
+    document.addEventListener('DOMContentLoaded', () => {
+      this.addToggleCollapseListener();
+    });
+  }
+  addToggleCollapseListener() {
+    this.toggles.forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        toggle.parentNode.parentNode.classList.toggle('active');
+      });
+    });
+  }
+  addNewToggleCollapseListener() {
+    this.toggles = document.querySelectorAll('#content-container .accordion-toggle');
     this.toggles.forEach(toggle => {
       toggle.addEventListener('click', () => {
         toggle.parentNode.parentNode.classList.toggle('active');
@@ -79,38 +92,66 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
+/* harmony import */ var _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CollapsePanel */ "./src/modules/CollapsePanel.js");
+ // Import the CollapsePanel class
+
 class PageTransitions {
   constructor() {
     this.init();
-    this.links = document.querySelectorAll('a');
-    console.log(this.links);
   }
   init() {
     document.addEventListener('DOMContentLoaded', () => {
-      this.addClickListener();
-      console.log('The DOM has loaded');
+      this.addLinkClickListener();
     });
   }
-  addClickListener() {
+  addLinkClickListener() {
+    this.links = document.querySelectorAll('a');
     this.links.forEach(link => {
       link.addEventListener('click', e => {
+        e.preventDefault();
         if (this.isExternalLink(link)) {
           link.setAttribute('target', '_blank');
         }
-        e.preventDefault();
+        this.loadContent(link.getAttribute('href'), 'content-container');
       });
     });
   }
-  loadContent(targetUrl) {
+  addNewLinkClickListener() {
+    this.newlinks = document.querySelectorAll('#content-container a');
+    console.log(this.newlinks);
+    this.newlinks.forEach(link => {
+      link.addEventListener('click', e => {
+        e.preventDefault();
+        if (this.isExternalLink(link)) {
+          link.setAttribute('target', '_blank');
+        }
+        this.loadContent(link.getAttribute('href'), 'content-container');
+      });
+    });
+  }
+  loadContent(targetUrl, elementId) {
     fetch(targetUrl).then(response => response.text()).then(data => {
-      this.updateContent(data);
+      this.updateContent(data, elementId);
       history.pushState(null, null, targetUrl);
     }).catch(error => console.error('Error fetching content:', error));
   }
-  updateContent(data) {
+  updateContent(data, elementId) {
     const contentContainer = document.getElementById('content-container');
     const parsedData = new DOMParser().parseFromString(data, 'text/html');
-    contentContainer.innerHTML = parsedData.getElementById('content').innerHTML;
+    const targetElement = parsedData.getElementById(elementId);
+    if (targetElement) {
+      const newContent = targetElement.innerHTML;
+
+      // If you want to replace the content instead of appending:
+      contentContainer.innerHTML = newContent;
+
+      // Create an instance of CollapsePanel and call toggleCollapse
+      this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
+      this.collapsePanel.addNewToggleCollapseListener();
+      this.addNewLinkClickListener();
+    } else {
+      console.error(`Element with ID '${elementId}' not found in the fetched data`);
+    }
   }
 
   // Function to check if a link is external