Elementor Proを使うと、アコーディオンというウィジェットが使えます。便利そうなんで使ってみると予想と違う残念な動きをします。
具体的には、以下の2つが予想外でした。
- アコーディオンの先頭項目がページ表示時に必ず開いてしまう。
- 項目名に同じページのリンクが張られる。
この記事では、Elementor Proのアコーディオンウィジェットの気に入らない動きを無くす方法をまとめておきたいと思います。
アコーディオンをページ表示時にすべて閉じるカスタマイズ
方法は2つあります。
- 先頭にダミー項目を入れてCSSで消す方法
- 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は使うとサイトも重くなりますので使わない方が幸せだと思います。
