jQueryのトグルを使用したアコーディオン

せっかく作ったので、忘備録として残す。

構成の考査

大体の構成は以下の通り。

常時見えているタイトル部 と クリックすることで見えるノート部をつくる。

タイトル部の構成

タイトル部は、リストマーカ と タイトル と アイコンで構成。

リストマーカ は タイトル部の疑似要素として作成。

アイコン は アイコンを入れる要素を作り右端に置く。

アイコンは棒2本作製してプラス型に変形させる。

ノート部の構成

ノート部は、リストマーカー と 本文で作成。

クリック時の動作

クリック対象は、リストマーカー、アイコンを含むタイトル行。

• 隠してあるノートを表示させる。
• アイコンを「プラス型」から「マイナス型」にゆっくり変化させる。
• アイコンを「マイナス型」から「プラス型」に戻す時もゆっくり変化させる。

実際に動くURL

後日リンク予定。

使用したJQuery

jQuery のコード

流れは、以下の通り

1. 1) クリックする場所を指定する。
2. 2) slideToggle() で表示したい場所を指定する。
   　next() は次の兄弟要素を参照する。
3. 3) toggleClass(‘ ‘) で、クラスを付加する。
   　クリック時に変化する必要がある場合はクラスを付加する。
   　クラスはCSSに記入する。

$('.areaItemTitle').on('click', function () {
  //// クリックした次の要素をスライドで表示する 
  $(this).next().slideToggle(200);
  //// クリックした要素の子要素にクラスを追加する
  //// cssに付加したクラス名にアコーディオンが空いた時の処理を書く
  $(this).children('.areaItemIcon').toggleClass('is-open');
})

.next() .children(”) .find(”) の違い

next() は次の兄弟要素を参照する。

children(‘ ‘)　は子要素を参照する。孫要素は参照できない。

find(‘ ‘) を孫要素も含め参照できる。

HTML と CSS の構成

HTML コード

<div class="accordion__item">

  <!-- タイトル部を作成 -->
  <div class="accordion__areaItemTitle areaItemTitle">

    <div class="areaItemTitle__itemTitle itemTitle">
      夏目漱石 吾輩は猫である
    </div><!-- .areaItemTitle__itemTitle -->
    
    <!-- アイコン部を作成 -->
    <div class="areaItemTitle__areaItemIcon areaItemIcon">
      <div class="itemIconBar1"></div><!-- .itemIconBar1 -->
      <div class="itemIconBar2"></div><!-- .itemIconBar2 -->
    </div><!-- .areaItemTitle__areaItemIcon -->

  </div><!-- .accordion__areaItemTitle -->
  
　<!-- ノート部を作成 -->
  <div class="accordion__itemNote itemNote">
    落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。
    この時妙なものだと思った感じが今でも残っている。
  </div><!-- .accordion__itemNote -->

</div><!-- .accordion__item -->

CSSのコード

/// タイトルの外枠の作成
.areaItemTitle {
  background-color: #039ED2;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 56px;
  padding-right: 14px;
  position: relative;

　//// リストマーカーの作成
  &::before {
    content: 'Q';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
  }

}

//// タイトル本文
.itemTitle {
  margin-right: auto;
}

//// アイコン部の外枠の作成
.areaItemIcon {
  position: relative;
  width: 14px;
  height: 14px;

  //// アイコン クリック時の変化
  &.is-open {
    .itemIconBar2 {
      transform: rotate(90deg);
      transition: all 0.3s ease 0s;
    }
  }

}

//// アイコンの部品 横線
.itemIconBar1 {
  width: 14px;
  height: 2px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

//// アイコンの部品 縦線
.itemIconBar2 {
  width: 2px;
  height: 14px;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease 0s;
}

//// ノート部の作成
.itemNote {
  color: #039ED2;
  background-color: #ffffff;
  border: 1px solid #039ED2;
  font-weight: bold;
  line-height: calc(24 / 16);
  padding: 16px 20px 16px 56px;
  position: relative;
  display: none;

  //// リストマーカーの作成 
  &::before {
    content: 'A';
    position: absolute;
    top: 16px;
    left: 20px;
  }
}

使用例

Q＆A で非常によく使われれる