お問い合わせはコチラから

Elementorのアコーディオンを初期状態で閉じるカスタマイズ

サイト運営

Elementor Proを使うと、アコーディオンというウィジェットが使えます。便利そうなんで使ってみると予想と違う残念な動きをします。

具体的には、以下の2つが予想外でした。

  1. アコーディオンの先頭項目がページ表示時に必ず開いてしまう。
  2. 項目名に同じページのリンクが張られる。

この記事では、Elementor Proのアコーディオンウィジェットの気に入らない動きを無くす方法をまとめておきたいと思います。

アコーディオンをページ表示時にすべて閉じるカスタマイズ

方法は2つあります。

  1. 先頭にダミー項目を入れてCSSで消す方法
  2. jQueryでアコーディオンを強制的に閉じる

アコーディオン先頭にダミー項目を入れてCSSで消す方法

必ず先頭の項目が開く仕様なので、先頭にダミーの項目を入れて、CSSで非表示にすればいいじゃないか、という解決方法があります。

しかし、この方法は後から見て分からなくなりそうなのと、先頭項目を消すと罫線がおかしくなる欠点があります。

/* Hides the first accordion item */ .elementor-accordion .elementor-accordion-item:first-child { display: none; }

jQueryでアコーディオンを強制的に閉じる

こちらは、jqueryで動きを変えてしまうカスタマイズ方法です。

注意点は、setTimeoutを使って実行を遅らせないと処理が空振りすることがあることです。アコーディオンを対象としたjavascriptの場合は、上記を加味しないと動作が不安定になります。

<script> jQuery(document).ready(function($) { var delay = 100; setTimeout(function() { $('.elementor-tab-title').removeClass('elementor-active'); $('.elementor-tab-content').css('display', 'none'); }, delay); }); </script>

アコーディオンの項目名に同じページのリンクが張られる。

とても不思議なのですが、アコーディオンの項目に同じページのリンクが張られてしまいます。

これのどこがまずいか?

そもそもアコーディオンはクリックして開閉するものですので、余計なリンクが張られていると誤動作したように見えますので、UX的にNGだと思います。

こちらも、setTimeoutを使わないと、リンクが除去できたりできなかったり動作が不安定になりますので注意してください。

<script> jQuery(document).ready(function($) {
		var delay = 100; 
		setTimeout(function() {
    $(".elementor-tab-title a").replaceWith(function() { 
        return "<span>" + this.innerHTML + "</span>"; 
    });
		}, delay);
	});
</script>

まとめ

Elementor proのウィジェットはそのまま使えれば便利そうですが、思った動きをしない時に急に面倒になります。

元の動きがよくわからないので、javascriptで調整する時にもsetTimeoutが必要だったり、CSSでカスタマイズする時にも階層が深くてセレクタの指定が大変だったりします。

Elementorは一時使ったことがありましたが、カスタマイズを前提にするととても扱いにくいので、今では全く使う気がしません。Elementorは使うとサイトも重くなりますので使わない方が幸せだと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました