Elementorのアコーディオンを閉じたい!そんな時に便利なプラグイン

WordPress のページビルダーとして人気の高い「Elementor」なんですが、ちょいとクセや制限があったりと「うまくいかーん!」と頭を悩ませることも度々あります。

そんな中でも、今回は解決に時間がかかった「アコーディオン」について紹介したいと思います

デフォルトでは開きっぱなし

「知りたい人だけ、どうぞ!」的な感じでよく使われる「アコーディオン」なんですが、「Elementor」には jQuery や CSS を使わずとも標準で入れ込むことができます。

「Elementor、便利すぎるー!」と思っていたのもつかの間、「あれ、開いとる…?」

そう、簡単に「アコーディオン」の機能を使える「Elementor」なんですが、実はデフォルトでボックスが開いた状態で表示されるんですよ

elementor
まさに、開いた口がふさがらない。

いやいや、「アコーディオン」の機能を使いたい人って最初は閉じておきたいから使うわけで、開いた状態で最初から表示されたら「アコーディオン」の意味ないじゃないかーと思うんですけどね。

実は、この仕様には世界中の人が文句を言っています。笑

でも、「Elementor」の制作側では変更する様子もなく、利用者が「このコードを入れてみて」「いや、できない」という話し合いがあちこちで繰り広げられています。

彼らの話し合いを読んでいたところ、以前はコードを変更すれば解決したようですが、バージョンアップしてからは何しても閉まらなくなったようです。

諦めるしかないのか…と思ったら、ある男性が「これで解決するよ!」と情報をシェアしたところ、その後は「THANK YOU!」の嵐になってそのセッションは終了になっていました

救世主「Granular Controls」

「アコーディオン」を最初から閉じた状態にする方法としてある男性が情報をシェアしたのは、「Granular Controls For Elementor」というプラグイン

elementor
「アコーディオン」だけでなく、「プレビュー」を簡単に見ることができるようにしたり、「編集」の画面背景の色を変えたりすることも可能になります。

ひとまず、今回は「アコーディオン」を最初から閉じておくようにする手順を紹介していきましょう

STEP.1
インストール
まずは、プラグインの新規から「Granular Controls For Elementor」を検索して「インストール」、そして「有効」にしてください。
STEP.2
Emementorから

elementor

「有効」にしたら、WordPressの管理画面メニューにある「Elementor」から「Granular Controls」を選択。

STEP.3
YESに変更

elementor

「Granular Controls」の設定画面が表示されたら、「General Controls」タブにある「Accordions Closed?」を「Yes」に変更すれば設定が完了です。

注意
アコーディオンを閉じたままにできるプラグインとして「Granular Controls」を紹介したのですが、環境によっては機能しない場合もあるという貴重な情報をいただきました。プラグインでは機能しなかったという方は、下記の方法で試してみてくださいね。

yuyaさん、ありがとうございます!

JavaScriptをコピペする

プラグイン「General Controls」は最近サポートもされているのかどうかも分からない状態なので、「JavaScript」を使った方法も紹介します。

「JavaScript」と聞いただけでアレルギー反応を起こす人もいるかもしれませんが、今回紹介するのは全然難しくないです。

文字通り、「コピペ」するだけです

STEP.1
「ELEMENTS」で追加した「アコーディオン」の下に、もう1つ「HTML」を追加します。
STEP.2
追加した「HTML」に、下記のコードを追加するだけ。
HTML
<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>

いまいち分からなかった人は、下の動画を見ると分かりやすいと思います

参考 Elementor | Accordion closedloom

「JavaScript」を入れるのでちょっと表示速度に影響があるかもしれませんが、プラグインを入れるよりも簡単かもしれませんね。

情報参照元:https://voidcoders.com/elementor-accordion-closed-by-default/

さいごに

アコーディオンを使う理由って「閉じたい情報があるから」のはずなんですが、なんでデフォルトで開いた状態なんでしょうかねー。笑

まあ「Elementor のアコーディオンを閉じたい!」という人は、プラグイン「Granular Controls For Elementor」を使うなり「JavaScript」を入れるなりしてみてください!