ba-block-cli/src/blocks/technologies/technologies.js

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    console.log('Technologies init');

    // Technologies tab
    var tts = document.querySelectorAll('.technologies-tab');
    if (tts && tts.length > 0) {
        tts.forEach(function(tt) {
            var nls = tt.querySelectorAll('.nav-link');
            if (nls && nls.length > 0) {
                nls.forEach(function(nl) {
                    nl.addEventListener('click', function (evt) {
                        evt.preventDefault();
                        var navLinks = tt.querySelectorAll('.nav-link.active');
                        if (navLinks && navLinks.length > 0) {
                            navLinks.forEach(function(navLink) {
                                navLink.classList.remove('active');
                            });
                        }
                        this.classList.add('active');
                        var selector = this.getAttribute('href'), 
                            selected = tt.querySelector(selector),
                            panes = tt.querySelectorAll('.tab-pane');

                        // Hide all panes
                        if (panes && panes.length > 0) {
                            panes.forEach(function(pane) {
                                pane.classList.remove('fade');
                                pane.classList.remove('show');
                                pane.classList.remove('active');
                            });
                        }

                        // Show the selected pane
                        if (selected) {
                            selected.classList.add('fade');
                            selected.classList.add('show');
                            selected.classList.add('active');
                        }
                    });
                });
            }
        });
    }
});