アコーディオン機能（コンテンツ展開/折りたたみトグル） - JavaScript / jQuery

Q＆AやFAQ（よくある指紋）のようにタイトルをクリックすると、内容が展開されてもう一度押すと内容が折るjQueryです。 シンプルだが便利に使えるコードです。

WordPressを使用している場合、 Avada テーマや Enfold テーマなどで提供するアコーディオン/トグル機能を使用できます。 エレメンターページビルダーでも トグルとアコーディオンウィジェットを提供しています。 Avada テーマにFAQ /トグル要素が表示されない場合 ここを参照してみてください。

JavaScriptを使用したアコーディオン/トグル機能

この記事ではjQueryメソッドを紹介しましたが、jQueryはサイトの速度に悪影響を及ぼすので、jQueryではなくJavascriptメソッドを使用する方が良いでしょう。

JavaScriptでトグル/アコーディオン機能を実装するさまざまなソースがあります。 W3Schoolsで提供されるコードを使用できます。

サイトの速度に影響を与えたくない場合は、HTML/CSSでアコーディオン/トグル機能を実装することも可能です。

• HTML / CSSで動作するアコーディオンメニュー

アコーディオン機能（コンテンツ・ドロップ/折り畳みトグル）jQuery

$(document).ready(function() { $(".content").hide(); //content クラスを持つ div を表示/非表示(トグル) $(".heading").click(function() { $(this).next(".content").slideToggle(500); }); });

• デモ

WordPressで上記のコードを使用する場合は、次の形式で追加してください。

jQuery(document).ready(function($) {
 // 코드
})

또는

(function($) {

    $(document).ready(function() {

        // 코드

    });

})(jQuery);

メモ：

• WordPress FAQプラグイン