post #4448
Código JavaScript para Criar Tabs Customizadas com Widget Button + Container no Elementor
Publicado em: 19/02/2024 / Atualizado em: 19/02/2024
Se você quer criar um sistema de Tabs customizadas no Elementor, para não ficar preso a solução do widget padrão (tabs) do Elementor, segue abaixo uma solução inovadora, que pode te ajudar muito.
Basicamente, você vai trazer um container onde vai ficar os botões, e outro container, para ser o principal dos demais container dentro dele. A estrutura ficará mais ou menos assim:
Acima temos o container “Botões Cursos (Tabs)” e logo em seguida o container “Curso #1 (Tabs)“, onde fica os outros container de seções customizadas da página.
No primeiro botão, adicione o ID btn-openss-1 e a CLASS btn-ativo, assim, este botão ficará com a apareceria de ativo (você pode customizar o CSS dele depois).
Para os próximos botões, apenas adicione o ID btn-openss com a sequencia numérica adequada. Ex: btn-openss-2, btn-openss-3, assim por diante, quantos botões e seções quiser criar. Como mostra abaixo:
Agora que nossos botões estão funcionando perfeitamente, precisamos atribuir um conteúdo para eles exibirem ou ocultarem. Para isso, adicione no seu container “pai”, o ID div-openss-1, assim ele vai ser referenciado ao botão btn-openss-1 automaticamente. Veja abaixo:
Para os outros containers, você precisa adicionar uma CLASS hidden, para que eles fiquem ocultos, e somente apareça quando o respectivo botão atribuído a eles for clicado. Veja:
Sua estrutura ficará mais ou menos assim:
Agora, você precisa adicionar o código customizado (JS + CSS) que vai fazer a mágica acontecer. Segue código abaixo:
<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>Neste exemplo, eu adicionei ele dentro do widget HTML do Elementor, na página mesmo, segue abaixo:
Assim, eu sei que esse código se refere apenas esta seção/página, mas é possível adicionar globalmente com o “adicionar código customizado” do Elementor PRO, ou outro plugin de código global.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4448
ID de Referência: 4448
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.