97 lines
3.7 KiB
JavaScript
97 lines
3.7 KiB
JavaScript
|
|
/* ACCORDION */
|
|
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');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
/* TABS */
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const tabs = document.querySelectorAll('.tab-link');
|
|
const panes = document.querySelectorAll('.tab-pane');
|
|
const tabContainer = document.querySelector('.lcp-tab-container'); // The parent container
|
|
|
|
// Only enable the hash functionality if the container has the class '.lcp-support-hash'
|
|
if (tabContainer && tabContainer.classList.contains('lcp-support-hash')) {
|
|
|
|
// Function to set the active tab based on the hash in the URL
|
|
function setActiveTabFromHash() {
|
|
const hash = window.location.hash; // Get the current URL hash
|
|
if (hash) {
|
|
const targetTab = document.querySelector(`.tab-link[data-tab="${hash.substring(1)}"]`); // Remove '#' from hash
|
|
const targetPane = document.getElementById(hash.substring(1));
|
|
|
|
// If both tab and pane exist, make them active
|
|
if (targetTab && targetPane) {
|
|
tabs.forEach(link => link.classList.remove('active'));
|
|
panes.forEach(pane => pane.classList.remove('active'));
|
|
|
|
targetTab.classList.add('active');
|
|
targetPane.classList.add('active');
|
|
} else {
|
|
console.error(`Tab or pane with ID '${hash}' not found.`);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Set the active tab from the hash when the page loads
|
|
setActiveTabFromHash();
|
|
}
|
|
// Handle tab clicks
|
|
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
|
|
tab.classList.add('active');
|
|
|
|
// Get the target pane and update URL hash
|
|
const targetPaneId = tab.dataset.tab;
|
|
const targetPane = document.getElementById(targetPaneId);
|
|
|
|
// Check if targetPane exists before trying to manipulate it
|
|
if (targetPane) {
|
|
targetPane.classList.add('active');
|
|
if (tabContainer && tabContainer.classList.contains('lcp-support-hash')){
|
|
window.location.hash = targetPaneId; // Update the URL hash
|
|
}
|
|
} else {
|
|
console.error(`Tab pane with ID '${targetPaneId}' not found.`);
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|