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サイトのアクセシビリティを作成できるようにする方法です。
このチュートリアルは以上です。 その他のチュートリアルとアップデートについては、 FacebookとTwitterに参加してください。
