Uzyskaj natychmiastowy hosting z elementem ELEMENTORem i ELEMENTOR PRO

Z CDN, SSL i kopią zapasami.

Zacznij dzisiaj

Jak otworzyć określony przełącznik, zakładkę lub akordeon Elementora za pomocą przycisku?

Muneeb Poradniki WordPress Jan 22, 2022

Witryna WordPress musi oferować bezproblemową nawigację i użytkowanie, aby czuć się mile widzianym. Dlatego Twoja witryna musi mieć łatwe i dostępne linki, do których mogą podejść odwiedzający.

Istnieje kilka sposobów na udostępnienie przełączników, zakładek lub akordeonów. Jednocześnie w tym samouczku nauczymy się, jak używać przycisku, aby uzyskać dostęp do konkretnego przełącznika, zakładki lub akordeonu Elementora .

Jak otworzyć określony przełącznik, zakładkę lub akordeon Elementora?

W tym samouczku mamy różne kody do różnych celów wymienionych poniżej. Upewnij się, że wybierasz kod, który najlepiej odpowiada Twojemu zadaniu.

Aby rozpocząć, utwórz element HTML i skopiuj wymagany kod.

Zaczynaj

Umieść element HTML na stronie jak najbliżej tabulatora, harmonijki lub elementu toggle. Następnie dodaj niezbędny kod.

1. Kod na akordeon

Atrybut: 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. Kod dla przełącznika Elementora

Atrybut: 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. Kod dla kart

Atrybut: 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. Kod dla kart EA

Atrybut: 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. Kod na akordeon EA

Atrybut: 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) =

Teraz utwórz link do przycisku, który otworzy kartę, przełącznik lub akordeon zdalnie.

Następnie zaktualizuj właściwość atrybutów przycisku. Przejdź do zakładki Zaawansowane, a następnie rozwiń menu atrybutów .

JS to system indeksowania od zera. Aby otworzyć pierwszy, drugi i trzeci przełącznik, zmień liczbę całkowitą na 0,1,2.

Wreszcie, twój Elementor Toggle Tab, Toggle i otwieracz akordeonu są gotowe do użycia. W ten sposób Elementor ułatwia Ci życie i pozwala stworzyć dostępność dla Twojej witryny, aby Twoi użytkownicy nie musieli się zbytnio spieszyć.

To wszystko od nas w tym samouczku. Aby uzyskać więcej samouczków i aktualizacji, dołącz do nas na Facebooku i Twitterze .