ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2023年7月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. 良い内容ありがとうございます。 親切にご説明いただき、理解も簡単でした。
    しかし、私が試したときにそのままコピーしてはいけないので、何が問題なのかと思いました。 もし理由が何であるかわかりますか?

    応答
    • WordPressを利用する場合は、あえてjQueryを使用する必要がなく、ページビルダー機能を使用すると便利です。

      エレメンターページビルダートグル/アコーディオン: https://avada.tistory.com/2417
      Avada テーマトグル/アコーディオン: https://avada.co.kr/%EC%95%84%EB%B0%94%EB%8B%A4-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%ED%86%A0%EA%B8%80%EC%95%84%EC%BD%94%EB%94%94%EC%96%B8-%EC%87%BC%ED%8A%B8%EC%BD%94%EB%93%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/

      応答