jQuery：トリガーより上部に開くアコーディオン

検索フォームなどで、「もっと詳細な条件を追加する」という下向きの▼が付いたボタンをよく見かけます。
クリックすると、アコーディオンパネル（詳細な条件が追加できる入力欄）が下にびょーんと現れるものです。（トリガーになったボタンは下に下がり、上部に入力欄が現れます）

仕事でそれを作成する機会がありましたので、メモしておこうと思います。
WordPress以外の記事になりますが、WordPressの中で使いましたので…😌

Contents

1 デモ

デモ

シンプルなデモページを作成しましたので、動作を確認できます。

DEMO

HTML準備

<div class="dropdown">が、最初は隠れている部分です。
<div class="triger">が、トリガーになる部分です。

<div class="dropdown">
  
  <ul>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
  </ul>

</div><!-- .dropdown -->

<div class="triger">
  
  <div class="btn-more">詳細情報</div>

</div><!-- .triger -->

jQurey準備

<div class="dropdown">は最初は隠しておき、
<div class="btn-more">をクリックすると、
<div class="triger">より前のタグ.prev()が
.slideToggle()します。

そして、$(this).toggleClass("close");で、ボタンをクリックするたびに.closeのクラスを追加したり、除去したりします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

$(function(){
     $(".dropdown").hide();
     $(".btn-more").click(function(){
          $(".triger").prev().slideToggle();
          $(this).toggleClass("close");
     });
});

CSS準備

.closeが追加された時と除去された時で、WEBフォントを使い、矢印の向きを変えました。

.btn-more {
  width: 200px;
  text-align: center;
  background-color: #f1f1f1;
  padding: 10px 0;
  margin-left: 20px;
  cursor: pointer;
}

.btn-more::before {
  font-family: 'FontAwesome';
  content: "\f078";
  margin-right: 10px;
  color: #999;
}

.btn-more.close::before {
  font-family: 'FontAwesome';
  content: "\f077";
  margin-right: 10px;
  color: #999;
}

.dropdown {
  background-color: #f1f1f1;
  padding: 15px;
}

.dropdown ul { margin-left: 2em;}
.dropdown ul li { list-style-type: disc;}

以下のサイト様を参考にさせていただきました。ありがとうございます。