デイトラWeb制作コース中級編 DAY28 Q and Aをアコーディオンでコーディング①

2022年9月11日2023年2月16日

ボタンをクリックすると、ビヨーンとテキストが出てくるアレですね。よくQandA(FAQ)に使われています。下準備として、プラスとマイナスのアイコン画像をカンプからDL⇨imgフォルダに入れておきます。

Q and Aをアコーディオンでコーディングqa編 jQuery

コードとしては短いです。新しいセレクタが2つ、新しいメソッドが1つ出ます。

// アコーディオン
  jQuery('.accordion__head').click(function() {
	jQuery(this).next().slideToggle();
	jQuery(this).children('.accordion__icon').toggleClass('is-open');
});

新しいセレクタ

カテゴリー：参照 > Tree Traversal

選択したセレクタを基準に、他の要素を参照します。

next()…選択した要素の1つ後ろの兄弟要素
children()…選択した要素の子要素

新しいメソッド

カテゴリー：効果 > Sliding

各種効果を設定することができます。> スライド表示に関する効果です。

slideToggle()…要素の表示をスライドダウン/スライドアップで切り替える

※Toggleの意味：同一の操作で二つの状態を交互に切り換えること

Q and Aをアコーディオンでコーディングqa編 HTML

まずはQandAのセクションを作ります。いつものようにインナーを入れます。その下に見出し。

次に定義リストでコーディングしていきます。dlでエリア全体を囲みます。その中にdt,ddとdivで内容を作ります。

<div class="qa__item accordion">
  <dt class="accordion__head">クリックするとどうなりますか？<span class="accordion__icon"></span></dt>
  <dd class="accordion__body">
    <div class="accordion__body-in">アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</div><!-- /.accordion__body-in -->
  </dd>
</div><!-- /.qa__item -->

これを4つ複製します。今回はナンバリングは要りません。

Q and Aをアコーディオンでコーディングqa編 CSS

.qa

記述なし。

.qa__inner

記述なし。

.qa_items

上下マージンを空けます。幅はカンプから読み取った値を固定で入れます。広がりすぎないようにmax-widthを設定しておきます。

.qa__item

アコーディオンの1つ1つですね。下マージンを空けて、一番最後のみ0にします。

.accordion

記述なし。

.accordion__head

アコーディオンの見出し部分。今回の場合で言うと、Qの部分にあたります。

マージンはカツカツにして、パディングで高さと幅を出します。背景色はメインカラーを敷きます。文字色は白。

position: relative;をセットして、擬似要素を乗せる下地を作ります。ホバーで指マークにします。フォントサイズ気持ち大きめに。

擬似要素beforeにバー(?)の内容を書いていきます。contentにQと入れて、QandAのQの文字が文頭につくようにします。position: absolute;で上と左を空けます。フォントは太め。文字色は白。フォントサイズは気持ち小さめに。

.accordion__body

ウィンドウというかパネルというか、アコーディオンの本体ですね。クリック(or タップ)されていない時はdisplay: none;にして隠しておきます。インナーを着せるため、外側の装飾のみを書きます。マージンは0でカツカツに。背景は白。ウィンドウの周りの枠をメインカラーで引きます。フォントは太め。

.accordion__body-in

コンテンツの中身ですね。パディングで幅と高さを出します。左はAが入るため若干広めにとります。line-heightをとって見やすく。文字色はメインカラーです。.accordion__headと同じくposition: relative;にし、擬似要素beforeを乗せる下地を作っておきます。フォントサイズは標準です。

SP版では右パディングを狭くします。

.accordion__headと同じく、position: absolute;にし、擬似要素beforeを使って先頭にAを入れます。leftはQと揃うように空けます。topも少し空けます。フォントサイズは気持ち小さめです。

.accordion__icon

最後はプラスとマイナスのマークですね。これを押すことでウィンドウが開閉します。widthとheightで見えない四角を作ります。四角の背景にアイコン画像を貼ってあげます。こちらも絶対配置にし、rightとtopで位置を決めます。transform: translateY(-50%);で縦方向真ん中に持ってきます。

あとは、アコーディオンが開いた時(is-openが付与された時)のみアイコンをマイナスマークにします。

以上です。お疲れ様でした！次は、アローアイコンを押すと開閉されるアコーディオンの実装です。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

nagi

デイトラWeb制作コース中級編 DAY28 Q and Aをアコーディオンでコーディング①