株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | 動きのあるページ制作3「アコーディオン」

2017.11.21

CATEGORY - web

よく見る系の動きシリーズ!というわけではないのですが、「アコーディオン」を実装していきます。

アコーディオン

アコーディオンの仕組み

まず、完成図から。

アコーディオン

こんなやつですね^^

「アコーディオン」で作成する完成版のファイルはこちらからダウンロードできます↓↓

アコーディオン 完成版ファイル

実装においての考え方をみていきましょう。

1. アコーディオンのトリガー部分(クリックする部分)とターゲット部分(開く部分)に分ける
2. アコーディオンのターゲット部分を非表示にしておく
3. アコーディオンのトリガー部分をクリックしたら、ターゲット部分を表示する

こんな感じですね。

アコーディオンのトリガー部分(クリックする部分)とターゲット部分(開く部分)に分ける

では、HTMLで、アコーディオンのトリガー部分とターゲット部分をJSで取得できるようにしたいので、クラスをつけておきます。

<ul class="faq-list">
  <li>
    <div class="faq-header js-accordion-trigger">
      Q.アプリを使用するのに費用はかかりますか?
    </div>
    <div class="faq-body js-accordion-target">
      A.ダウンロードは無料です。新しいキャラクターを使用するのに費用がかかる場合もあります。
    </div>
  </li>
  <li>
    <div class="faq-header js-accordion-trigger">
      Q.どんな時に応援してくれるのですか?
    </div>
    <div class="faq-body js-accordion-target">
      A.スタート時、ゴール時、あとは、1kmごとなどに応援してくれます。
    </div>
  </li>
  <li>
    <div class="faq-header js-accordion-trigger">
      Q.使用するために必要なことはなんですか?
    </div>
    <div class="faq-body js-accordion-target">
      A.位置情報の設定をオンにしてください。電波が届かない場所では使用できません。
    </div>
  </li>
</ul>

それぞれのリストで、「Q.」の部分に、「js-accordion-trigger」を、「A.」の部分に、「js-accordion-target」をつけておきます。

アコーディオンのターゲット部分を非表示にしておく

次に、CSS。アコーディオンのターゲット部分を非表示にします。

.faq-list > li .faq-body {
  padding: 2px 18px 16px 40px;
  display: none;
}

.faq-body の初期表示を display:none にしました。

あ。あと、もう一点。

.faq-list > li .faq-header.is-open:after {
  transform: rotate(90deg);
}

ヘッダー部分の左側についている矢印みたいな画像。
アコーディオンを開いた時に、ヘッダー部分に 「is-open」というクラスを付けて、その時には、矢印が下を向くようにしました。

CSSの「transform」プロパティは、その要素を変形させるプロパティになります。
要素を移動(translate)させたり、拡大縮小(scale)させたり、回転(rotate)させたりできます。

今回は、90度回転させたいので、rotate(90deg) を指定しています。

アコーディオンのトリガー部分をクリックしたら、ターゲット部分を表示する

最後に、JS部分ですね。

まず、いつものように要素をjQueryで取得しておきます。

// アコーディオンの要素
var $trigger = $('.js-accordion-trigger');
var $target = $('.js-accordion-target');

で、クリックするごとに、ターゲット部分の表示/非表示を切り分けます。

// アコーディオン
$trigger.on('click', function () {
  var $this = $(this);
  // トリガーの親要素を取得
  var $parent = $this.closest('li');
  // ターゲットを取得
  var $target = $parent.find('.js-accordion-target');
  // ターゲットの表示・非表示処理
  $this.toggleClass('is-open');
  $target.slideToggle(250);
});

1つ1つみていきますか。

// トリガーの親要素を取得
var $parent = $this.closest('li');

jQueryの「closest」は、親要素で一番最初に出てきた指定された要素を取得します。

今回は、親要素の「li」を取得しています。

// ターゲットを取得
var $target = $parent.find('.js-accordion-target');

jQueryの「find」は、子孫要素の中で、指定された要素を取得します。

今回でいうと、トリガーの親要素の「li」の中で、指定された「.js-accordion-target」の要素を取得します。

// ターゲットの表示・非表示処理
$this.toggleClass('is-open');
$target.slideToggle(250);

jQueryの「toggleClass」は、その要素に、指定されたクラス名がついていなければ、そのクラス名をつけて、ついていれば、そのクラス名をとるといった動きをします。
(※CSSで指定した矢印用です。)

最後に、jQueryの「slideToggle」は、その要素を指定したスピード(今回は250ミリ秒)で、スライドダウン、スライドアップをします。
要素が非表示なら、スライドダウンして表示し、要素が表示していれば、スライドアップして、非表示にするといった便利なメソッドです^^

こんな感じで実装できます。

いろいろjQuery のメソッドがでてきましたが、便利なものが多くあるので、他にもいろいろ知りたい人は調べてみてください^^

今回のポイント

  1. CSSの transform プロパティは、その要素を変形させるプロパティです。
  2. jQuery で、親要素や子孫要素を取得するには、closest や find を使うと便利です。
  3. jQuery の、toggleClass や slideToggle は、要素の状態を見て、勝手に切り替えてくれるので便利です。

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP