Código JavaScript para Criar Tabs Customizadas com Widget Button + Container no Elementor

<style>
.hidden {
    display: none;
}

.btn-ativo a {
    border: 2px solid #F60 !important;
background: #E85320 !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Função para mostrar uma div, esconder as outras, atualizar o botão ativo e rolar suavemente até a div
    function showDiv(targetDivId, event) {
        event.preventDefault(); // Previne o comportamento padrão do link

        // Seleciona todas as divs que devem ser controladas
        var divs = document.querySelectorAll('[id^="div-openss-"]');
        // Seleciona todos os contêineres de botão
        var buttonContainers = document.querySelectorAll('.elementor-widget-button[id^="btn-openss-"]');

        divs.forEach(function(div) {
            if (div.id === targetDivId) {
                div.classList.remove('hidden');
                // Aguarda até que a mudança de visibilidade seja aplicada
                setTimeout(() => {
                    div.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 0);
            } else {
                div.classList.add('hidden');
            }
        });

        buttonContainers.forEach(function(container) {
            if (container.id === 'btn-openss-' + targetDivId.split('-')[2]) {
                container.classList.add('btn-ativo');
            } else {
                container.classList.remove('btn-ativo');
            }
        });
    }

    // Adiciona o ouvinte de eventos a cada link dentro dos contêineres de botão
    document.querySelectorAll('.elementor-widget-button[id^="btn-openss-"] .elementor-button-link').forEach(function(button, index) {
        button.addEventListener('click', function(event) {
            // O ID do botão é baseado no contêiner, não no link diretamente
            var buttonContainerId = button.closest('.elementor-widget-button').id;
            // Constrói o ID da div correspondente com base no índice do botão
            var targetDivId = 'div-openss-' + (index + 1).toString();
            showDiv(targetDivId, event);
        });
    });
});
</script>


<script>
jQuery(document).ready(function() {
  jQuery('a[href="#"]').click(function(e) {
    e.preventDefault();
  });
});
</script>