質問をクリックすると回答が表示されるアコーディオンを作る[jQuery,Vue]
Q&Aや質問一覧でよく見る、スライドもしくはアコーディオンする機能
サイトをコンパクトに見せるために質問のみ表示させ、回答を見たい場合には質問欄をクリックすることで解答欄を表示させたいと思います。
ニュッと出てくるのでスライドとも言えますし、畳まれているのでアコーディオンとも言えます。英語ではcollapse(コラプス)と呼ばれており、collapseはよく「つぶれる・崩壊する」と訳されますが「折りたたむ」という意味もあるそうです。
非表示にしたい要素を折りたたんでおいてアクションがあれば広げる、というところでしょうか。ただcollapse(コラプス)という呼び名は馴染みがないので、今回は「アコーディオン」で統一します。
jQueryとVue、それぞれで作成したいと思います。
早引き：ライブラリ別一覧
jQueryを利用
プラグインは使わずゼロから作成
Vue.jsを利用
ライブラリ「Element」を利用して作成
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を使って動的に表示
|
1 |
$(this).next().slideToggle(); |
クリックした質問ボックスの隣にある回答ボックスを表示させたいので、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
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> |
CSS
|
1 |
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> |
公式サイトよりCDNのURLを取得します。Vue.jsより後に読み込みます。
Elementにはスタイルシートが存在するのでそちらも忘れずにインポートしておきます。
作成にあたって次のサイトを参考にさせて頂きました。
Element – Collapse
HTML：基本の書き方
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="app"> <el-collapse v-model="activeNames" accordion> <el-collapse-item title="タイトル" name="名称"> // 表示内容 </el-collapse-item> // ... <el-collapse-item title="タイトル" name="名称"> // 表示内容 </el-collapse-item> </el-collapse> </div> |
設定
Element - Collapse設定一覧
記載例 ： 属性名="属性値"
| 属性名 | 説明 |
|---|---|
| value/v-model | 開閉時のイベントをハンドリングしている。 初期表示時に開いておく要素を指定可能。 |
| accordion | クリックした際に既に開いている要素があるとき、true=閉じてから開く。false=開いたままにする。デフォルト値： false。 |
| name | 各要素の名称を設定。 |
| title | タイトル部分に表示するテキストを設定。 |
| disabled | クリックに反応しなくなる。 初期表示時に閉じたままだと開くことができないので注意。 |
titleにアイコンのi要素や改行のbr要素を追加したい際は次のように<template>要素を使って記載します。
|
1 |
<template slot="title">テキスト</template> |
カスタマイズ
See the Pen vue-element-collapse by nanase webdesigner (@nanase-777) on CodePen.
CSS：一部を抜粋
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* タイトルの行の高さを変更 */ .el-collapse-item__header { height: 68px; line-height: 1.5; } /* 隠し要素の先頭にアイコンを表示 */ .el-collapse-item__content { position: relative; padding-left: 23px; } .el-collapse-item__content::before { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #3fc1c9; position: absolute; left: 0; top: 0; } |
タイトル部分は行の高さがデフォルトでline-height:48px;となっています。複数行になると行間が開いてしまうので文字の高さの1.5倍となるようline-height:1.5;にします。
また要素の高さもheight:48px;で固定されているので変更します。
隠し要素の方にアイコンを付けるとき、テキストがアイコンの下に回り込まないようにしたかったのでpadding-leftで余白を作り、アイコンはposition:absolute;で位置を指定しました。
以上でVueを用いたアコーディオンが作成できました。
