document.addEventListener('DOMContentLoaded', function () { // Find all elements with the class "lcp-accordion" var accordions = document.querySelectorAll('.lcp-accordion'); accordions.forEach(function (accordion) { // Find all tabs within the current accordion var tabs = accordion.querySelectorAll('.lcp-accordion-tab'); tabs.forEach(function (tab) { var header = tab.querySelector('h3'); var content = tab.querySelector('.lcp-accordion-content'); // Add click event to each header to toggle the content header.addEventListener('click', function () { // Toggle the 'active' class on the tab to show/hide content tab.classList.toggle('active'); // Optional: Close other open tabs (if only one tab should be open at a time) tabs.forEach(function (otherTab) { if (otherTab !== tab) { otherTab.classList.remove('active'); } }); }); }); }); }); document.addEventListener('DOMContentLoaded', function () { const tabs = document.querySelectorAll('.tab-link'); const panes = document.querySelectorAll('.tab-pane'); tabs.forEach(tab => { tab.addEventListener('click', function (event) { event.preventDefault(); // Remove active class from all tabs and panes tabs.forEach(link => link.classList.remove('active')); panes.forEach(pane => pane.classList.remove('active')); // Add active class to the clicked tab and its corresponding pane tab.classList.add('active'); const targetPane = document.querySelector(tab.getAttribute('href')); targetPane.classList.add('active'); }); }); });