【ソースコード】番外編：アコーディオンメニューの練習

目次

※コーディングの解説はCSS、JavaScriptのコメントを参照

ディレクトリ構成

    
extra2
 ├─css
 │  └─style.css
 │
 ├─js
 │  └─main.js
 │
 └─index.html

HTML（index.html）

別タブで開く 
index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="content">
      <h2 class="title">募集職種</h2>
      <ul id="ac-menu">
        <li>
          <div class="label">１．Webディレクター</div>
          <div class="detail">
            <dl>
              <dt>仕事内容</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>応募資格</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>必須スキル</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>給与</dt>
              <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
              <dt>休日・休暇</dt>
              <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd>
              <dt>雇用形態</dt>
              <dd>正社員（試用期間3ヶ月）<br>業務委託</dd>
              <dt>勤務時間</dt>
              <dd>フレックスタイム</dd>
              <dt>勤務地</dt>
              <dd>東京</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="label">２．Webデザイナー</div>
          <div class="detail">
            <dl>
              <dt>仕事内容</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>応募資格</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>必須スキル</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>給与</dt>
              <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
              <dt>休日・休暇</dt>
              <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd>
              <dt>雇用形態</dt>
              <dd>正社員（試用期間3ヶ月）<br>業務委託</dd>
              <dt>勤務時間</dt>
              <dd>フレックスタイム</dd>
              <dt>勤務地</dt>
              <dd>東京</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="label">３．プログラマー</div>
          <div class="detail">
            <dl>
              <dt>仕事内容</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>応募資格</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>必須スキル</dt>
              <dd>テキストテキストテキストテキスト</dd>
              <dt>給与</dt>
              <dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
              <dt>休日・休暇</dt>
              <dd>土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇</dd>
              <dt>雇用形態</dt>
              <dd>正社員（試用期間3ヶ月）<br>業務委託</dd>
              <dt>勤務時間</dt>
              <dd>フレックスタイム</dd>
              <dt>勤務地</dt>
              <dd>東京</dd>
            </dl>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

CSS（style.css）

別タブで開く 
style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-color: #fffbef;
  color: #000;
}
ul {
  list-style: none;
}

.content {
  max-width: 960px;
  padding: 0 20px;
  margin: 100px auto;
}
.title {
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 50px;
}
#ac-menu li {
  border-top: solid 1px #000;
}
#ac-menu li:last-child {
  border-bottom: solid 1px #000;
}
#ac-menu .label {
  cursor:pointer;
  font-size: 1.125rem;
  font-weight: bold;
  padding: 40px 30px;
  position: relative;
  transition: .5s;
}
#ac-menu .label:hover {
  background-color: #ffda5f;
}
/*
ラベル右側のアイコン「＋」を設定
beforeが横棒
afterが縦棒
*/
#ac-menu .label::before,
#ac-menu .label::after {
  content: '';
  width: 20px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
}
#ac-menu .label::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}
/*
アコーディオンメニューが開いている場合
*/
#ac-menu .label.open {
  /* ラベルの背景色を変更 */
  background-color: #ffda5f;
}
#ac-menu .label.open::before {
  /* ラベルアイコンの横棒を非表示 */
  opacity: 0;
}
#ac-menu .label.open::after {
  /* ラベルアイコンの縦棒を横向きに回転 */
  transform: rotate(180deg);
}
/*
アコーディオンメニューのコンテンツ部分は、「display: none;」で非表示にしておく。
ラベルクリック時にjQueryの「  $(this).next().slideToggle();」で表示に切り替わる
*/
#ac-menu .detail {
  border-top: solid 1px #ccc;
  padding: 35px 30px;
  display: none;
}
#ac-menu .detail dl {
  display: flex;
  flex-wrap: wrap;
}
#ac-menu .detail dt {
  width: 20%;
  font-weight: bold;
  margin-bottom: 40px;
}
#ac-menu .detail dd {
  width: 80%;
  margin-bottom: 40px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {
  #ac-menu .label {
    padding: 40px 0;
  }
  #ac-menu .detail {
    padding: 35px 0;
  }
  #ac-menu .detail dl {
    flex-direction: column;
  }
  #ac-menu .detail dt {
    width: 100%;
    margin-bottom: 10px;
  }
  #ac-menu .detail dd {
    width: 100%;
    padding-left: 10px;
  }
}

JavaScript（main.js）

別タブで開く 
main.js

$(function(){
  // アコーディオンメニューのラベルがクリックされた場合
  $("#ac-menu .label").on("click", function() {
    // labelクラスの次の要素（detailクラス）の表示・非表示を切り替える
    $(this).next().slideToggle();
    // labelクラスにopenクラスを追加したり削除したりする
    // openクラスの追加、削除を行うことでラベルの「－」と「＋」の切り替えを行う
    $(this).toggleClass("open");
  });
});