Como abrir um determinado Elementor Toggle, Tab ou Accordion com um botão

Muneeb Tutoriais do WordPress Jan 22, 2022

Um site WordPress deve oferecer navegação e uso sem complicações para se sentir bem-vindo. É por isso que seu site precisa ter links fáceis e acessíveis para os visitantes se aproximarem.

Existem várias maneiras de tornar as alternâncias, guias ou acordeões acessíveis. Ao mesmo tempo, neste tutorial, aprenderemos como usar um botão para acessar uma alternância, guia ou acordeão do Elementor específico.

Como abrir um determinado Elementor Toggle, Tab ou Accordion

Neste tutorial, temos códigos diferentes para diferentes propósitos listados abaixo. Certifique-se de escolher o código que melhor se adapta à sua tarefa desejada.

Para começar, crie um elemento HTML e copie o código necessário.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Coloque o elemento HTML na página o mais próximo possível da guia, sanfona ou elemento de alternância. Em seguida, adicione o código necessário.

1. Código para acordeão

Atributo: data-accordion-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let accordionTitles = $('.elementor-accordion-item .elementor-tab-title'); let openers = document.querySelectorAll('[data-accordion-open]'); openers.forEach( (e,i) =

2. Código para alternar Elementor

Atributo: data-toggle-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let toggletitles = $('.elementor-toggle-item .elementor-tab-title'); let openers = document.querySelectorAll('[data-toggle-open]'); openers.forEach( (e,i) =

3. Código para guias

Atributo: data-tab-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let desktoptitles = $('.elementor-tab-desktop-title'); let mobiletitles = $('.elementor-tab-mobile-title'); let isMobile = window.innerWidth { e.addEventListener('click',function(){ let openThis = e.getAttribute('data-tab-open'); if (!(desktoptitles.eq(openThis).hasClass('elementor-active'))){ desktoptitles.eq(openThis).click(); } if (!(mobiletitles.eq(openThis).hasClass('elementor-active'))){ mobiletitles.eq(openThis).click(); } $('html, body').animate({ scrollTop: isMobile? mobiletitles.eq(openThis).offset().top - 100 : desktoptitles.eq(openThis).offset().top - 100 },'slow'); }); }); } ); });

4. Código para guias do EA

Atributo: data-tab-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let eaTabsTitles = $('.eael-tabs-nav li'); let openers = document.querySelectorAll('[data-tab-open]'); openers.forEach( (e,i) =

5. Código para EA Accordion

Atributo: data-accordion-open|x

document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ let eaAccordionTitles = $('.eael-accordion-header'); let openers = document.querySelectorAll('[data-accordion-open]'); openers.forEach( (e,i) =

Agora, crie um link para o botão que abrirá uma guia, alternância ou acordeão remotamente.

Depois disso, atualize a propriedade de atributos do botão. Vá até a guia avançada e expanda o menu de atributos .

JS é um sistema de indexação baseado em zero. Para abrir a primeira, segunda e terceira alternâncias, altere o número inteiro para 0,1,2.

Finalmente, seu Elementor Toggle Tab, Toggle e Accordion opener estão prontos para serem usados. É assim que o Elementor facilita sua vida e permite que você crie acessibilidade para seu site para que seus usuários não precisem se apressar muito.

Isso é tudo de nós para este tutorial. Para mais tutoriais e atualizações, junte-se a nós em nosso Facebook  e Twitter .

Divi WordPress Theme