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

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

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

Contents

デモ

デモ

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

DEMO

HTML準備

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

<div class="dropdown">

  <ul>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
    <li>詳細情報</li>
  </ul>

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

<div class="trigger">

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

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

jQurey準備

<div class="dropdown">は最初は隠しておき、
<div class="btn-more">をクリックすると、
<div class="trigger">より前のタグ.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(){
    $(".trigger").prev().slideToggle();
    $(this).toggleClass("close");
  });
});

CSS準備

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

.btn-more {
  width: 200px;
  text-align: center;
  background-color: #f1f1f1;
  height: 44px;
  margin-left: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-more::before {
  font-family: 'Material Symbols Outlined';
  content: "keyboard_control_key";
  font-size: 20px;
  transform: rotate(180deg);
  transition: all .3s ease;
  margin-right: 8px;
  color: #999;
  display: block;
}

.btn-more.close::before {
  transform: rotate(0deg);
}

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