特定のElementorを開く方法ボタンでトグル、タブ、またはアコーディオンを切り替える

Muneeb WordPressチュートリアル Jan 22, 2022

WordPress Webサイトは、歓迎されていると感じるために、手間のかからないナビゲーションと使用法を提供する必要があります。 これが、訪問者がアクセスできるように、Webサイトに簡単でアクセス可能なリンクが必要な理由です。

トグル、タブ、またはアコーディオンにアクセスできるようにする方法はいくつかあります。 同時に、このチュートリアルでは、ボタンを使用して特定のElementorトグル、タブ、またはアコーディオンにアクセスする方法を学習します。

特定のElementorを開く方法トグル、タブ、またはアコーディオン

このチュートリアルでは、以下にリストされているさまざまな目的のためにさまざまなコードがあります。 目的のタスクに最適なコードを選択してください。

まず、 HTML要素を作成し、必要なコードをコピーします。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

HTML要素をページのタブ、アコーディオン、またはトグル要素のできるだけ近くに配置します。 次に、必要なコードを追加します。

1.アコーディオンのコード

属性: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. ElementorToggleのコード

属性: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.タブのコード

属性: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.EAタブのコード

属性: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.EAアコーディオンのコード

属性: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) =

次に、タブを開いたり、トグルしたり、アコーディオンをリモートで開いたりするボタンのリンクを作成します。

その後、ボタンの属性プロパティを更新します。 [詳細設定]タブに移動し、[属性]メニューを展開します。

JSはゼロベースのインデックスシステムです。 1番目、2番目、および3番目のトグルを開くには、整数を0、1、2に変更します。

これで、Elementor Toggle Tab、Toggle、およびAccordionオープナーを使用できるようになります。 これは、Elementorがあなたの生活を楽にし、ユーザーがあまり煩わしくないようにWebサイトのアクセシビリティを作成できるようにする方法です。

このチュートリアルは以上です。 その他のチュートリアルとアップデートについては、 FacebookTwitterに参加してください。