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

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

Last Updated：2020年11月15日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

$(document).ready(function() {
$(".content").hide();
//content 클래스를 가진 div를 표시/숨김(토글)
$(".heading").click(function()
{
$(this).next(".content").slideToggle(500);
});
});

（*注： WordPressで上記のコードを使用する場合、$記号をすべて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/

      応答