So öffnen Sie ein bestimmtes Element oder Umschalten, Tab oder Akkordeon mit einer Schaltfläche

Muneeb WordPress-Tutorials Jan 22, 2022

Eine WordPress-Website muss eine stressfreie Navigation und Nutzung bieten, um sich willkommen zu fühlen. Aus diesem Grund muss Ihre Website über einfache und zugängliche Links verfügen, an die sich die Besucher wenden können.

Es gibt mehrere Möglichkeiten, die Umschalter, Registerkarten oder Akkordeons zugänglich zu machen. Gleichzeitig lernen wir in diesem Tutorial, wie Sie mit einer Schaltfläche auf einen bestimmten Elementor- Schalter, -Tab oder -Akkordeon zugreifen.

So öffnen Sie ein bestimmtes Element oder Umschalten, Tab oder Akkordeon

In diesem Tutorial haben wir verschiedene Codes für verschiedene Zwecke, die unten aufgeführt sind. Stellen Sie sicher, dass Sie den Code auswählen, der für Ihre gewünschte Aufgabe am besten geeignet ist.

Erstellen Sie zunächst ein HTML-Element und kopieren Sie den erforderlichen Code.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Platzieren Sie das HTML-Element auf der Seite so nah wie möglich am Tabulator-, Akkordeon- oder Umschaltelement. Fügen Sie dann den erforderlichen Code hinzu.

1. Code für Akkordeon

Attribut: 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. Code für Elementor-Schalter

Attribut: 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. Code für Registerkarten

Attribut: 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. Code für EA-Tabs

Attribut: 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. Code für EA-Akkordeon

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

Erstellen Sie nun einen Link für die Schaltfläche, die eine Registerkarte, einen Schalter oder ein Akkordeon aus der Ferne öffnet.

Aktualisieren Sie danach die Eigenschaft attributes der Schaltfläche. Wechseln Sie zur Registerkarte „Erweitert“ und erweitern Sie dann das Menü „Attribute“ .

JS ist ein nullbasiertes Indizierungssystem. Um den ersten, zweiten und dritten Schalter zu öffnen, ändern Sie die Ganzzahl in 0,1,2.

Endlich sind Ihr Elementor Toggle Tab, Toggle und Accordion Opener einsatzbereit. So erleichtert Elementor Ihnen das Leben und ermöglicht es Ihnen, Barrierefreiheit für Ihre Website zu schaffen, damit Ihre Benutzer sich nicht viel anstrengen müssen.

Das ist alles von uns für dieses Tutorial. Besuchen Sie uns für weitere Tutorials und Updates auf Facebook und Twitter .

Divi WordPress Theme