This script enables dynamic switching between content sections based on custom data-snn-click and data-snn-click-match attributes. When a trigger element is clicked, the corresponding section is shown and all others are hidden, providing a lightweight, dependency-free tab/section switching solution. The first set is activated by default on page load
document.addEventListener("DOMContentLoaded", function() {
// Get all clickers and all matchers
var clickers = Array.from(document.querySelectorAll('[data-snn-click]'));
var matchers = Array.from(document.querySelectorAll('[data-snn-click-match]'));
// Helper: Hide all matchers, remove active from all
function resetAll() {
clickers.forEach(el => el.classList.remove('active'));
matchers.forEach(el => {
el.classList.remove('active');
el.style.display = 'none';
});
}
// Helper: Show matching set by value
function showSet(val) {
resetAll();
clickers.filter(el => el.getAttribute('data-snn-click') === val)
.forEach(el => el.classList.add('active'));
matchers.filter(el => el.getAttribute('data-snn-click-match') === val)
.forEach(el => {
el.classList.add('active');
el.style.display = '';
});
}
// Show only first set by default
if (clickers.length > 0) {
var firstVal = clickers[0].getAttribute('data-snn-click');
showSet(firstVal);
}
// Click events
clickers.forEach(clicker => {
clicker.addEventListener('click', function() {
var val = clicker.getAttribute('data-snn-click');
showSet(val);
});
});
});