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

Last Updated:2023年07月16日| | 2のコメント

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

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

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

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

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

サイトの速度に影響を与えたくない場合は、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);

メモ:


2のコメント

コメント

  1. 良い内容ありがとうございます。 親切にご説明いただき、理解も簡単でした。
    しかし、私が試したときにそのままコピーしてはいけないので、何が問題なのかと思いました。 もし理由が何であるかわかりますか?

    応答
割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy