質問をクリックすると回答が表示されるアコーディオンを作る[jQuery,Vue]

Q&Aや質問一覧でよく見る、スライドもしくはアコーディオンする機能

サイトをコンパクトに見せるために質問のみ表示させ、回答を見たい場合には質問欄をクリックすることで解答欄を表示させたいと思います。

ニュッと出てくるのでスライドとも言えますし、畳まれているのでアコーディオンとも言えます。英語ではcollapse(コラプス)と呼ばれており、collapseはよく「つぶれる・崩壊する」と訳されますが「折りたたむ」という意味もあるそうです。
非表示にしたい要素を折りたたんでおいてアクションがあれば広げる、というところでしょうか。ただcollapse(コラプス)という呼び名は馴染みがないので、今回は「アコーディオン」で統一します。

jQueryとVue、それぞれで作成したいと思います。

早引き:ライブラリ別一覧

jQueryを利用した場合

See the Pen qanda-slidedown by nanase webdesigner (@nanase-777) on CodePen.

質問ボックス、回答ボックスを用意

.box-qに質問文を、.box-aに回答文を入力します。

「Q」「A」の文字はHTML側で入力するのは手間なので、CSS側で表示させるようにしました。
質問文を回り込ませないためにボックスにpadding-leftを入れ、position: absolute;で「Q」「A」の表示位置を固定させています。

またユーザビリティを考慮しcursor: pointer;を設定しています。
この設定をすると、リンク上にマウスカーソルを持っていったときのようにカーソルの形が変わります。

最後に、回答ボックスをdisplay: none;で非表示にしておきます。

jQueryを使って動的に表示

クリックした質問ボックスの隣にある回答ボックスを表示させたいので、jQueryのnext関数を利用します。

next関数

next([selector])

各要素のすぐ隣の要素のみを抽出する

引数説明
selector 条件式。結果から更に絞り込みを行うことが可能。

そしてスライド(もしくはアコーディオン)表示させるためにslideToggle関数を使用します。

slideToggle関数

slideToggle([speed], [callback])

各要素の高さを操作して、slideDown/slideUpの動作を交互に行う

引数説明
speed アニメーションのスピード。"slow"、"normal"、"fast"、もしくはミリ秒単位("1500"など)でアニメーション完了までの時間を指定。fast=200、normal=400、slow=600ミリ秒となっている。指定のない場合はnormalが設定される。
callback 効果が完了した際に呼び出される関数を指定可能。

以上で、質問ボックスをクリック→回答ボックスの開閉ができるようになりました。

Vue.jsを利用した場合

See the Pen vue-element-collapse-normal by nanase webdesigner (@nanase-777) on CodePen.

Elementの読み込み

Vue

CSS

公式サイトよりCDNのURLを取得します。Vue.jsより後に読み込みます。
Elementにはスタイルシートが存在するのでそちらも忘れずにインポートしておきます。

作成にあたって次のサイトを参考にさせて頂きました。
Element – Collapse

HTML:基本の書き方

設定

Element - Collapse設定一覧

記載例 : 属性名="属性値"

属性名説明
value/v-model 開閉時のイベントをハンドリングしている。
初期表示時に開いておく要素を指定可能。
accordion クリックした際に既に開いている要素があるとき、
true=閉じてから開く。false=開いたままにする。
デフォルト値:false
name 各要素の名称を設定。
title タイトル部分に表示するテキストを設定。
disabled クリックに反応しなくなる。
初期表示時に閉じたままだと開くことができないので注意。

titleにアイコンのi要素や改行のbr要素を追加したい際は次のように<template>要素を使って記載します。

カスタマイズ

See the Pen vue-element-collapse by nanase webdesigner (@nanase-777) on CodePen.

CSS:一部を抜粋

タイトル部分は行の高さがデフォルトでline-height:48px;となっています。複数行になると行間が開いてしまうので文字の高さの1.5倍となるようline-height:1.5;にします。
また要素の高さもheight:48px;で固定されているので変更します。
隠し要素の方にアイコンを付けるとき、テキストがアイコンの下に回り込まないようにしたかったのでpadding-leftで余白を作り、アイコンはposition:absolute;で位置を指定しました。

以上でVueを用いたアコーディオンが作成できました。