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

前回のものと似ていますが別パターンです。デイトラのサイドバーがまさにこの形式ですね！ブログの月別アーカイブなど、汎用的で色々なところに使えそうです。下準備として、上下のアローアイコン画像をカンプからDL⇨imgフォルダに入れておきます。

Q and Aをアコーディオンでコーディング accordion-y編 jQuery

前回のコードとほとんど一緒です。違うのはセレクタとなるクラス名ですね。

jQuery('.accordion-y__head').click(function() {
　　jQuery(this).next().slideToggle();
	　jQuery(this).children('.accordion-y__icon').toggleClass('is-open');
});

Q and Aをアコーディオンでコーディング accordion-y編 HTML

ニュース系のコーディングでやったWidgetに形は似ています。

.qa-y

記述なし。

.qa-y__inner

記述なし。

.qa-y_items

2つのボックスを束ねるクラス。上マージンを広めにとり、左右はautoに、下は0にします。中に入る2つのボックスを横並びにするためdisplay: flex;にします。幅は固定にし、広がりすぎないようmax-widthを指定します。

.qa-y__item

ボックスの1つ1つ。下マージンを空けます。calc（100% / カード枚数 – 余白の幅 * 余白の数 / カード枚数 )の式を使います。シンプルに50％ – 20pxとしてもいいですね。左のボックスのみ右マージンを広めに取ります。右のボックスは0にすることで真ん中だけ隙間が空く形になります。

SP版では幅100％にして縦積みにします。右マージンはいらなくなるので0にします。下マージンのみ空けます。これがボックスとボックスの隙間になります。下のボックスのみ下マージンを0にします。

.accordion-y

記述なし。

.accordion-y__head

バーの部分ですね。前回の.accodion__headとプロパティはほぼ同じですね。違う点はborder-radiusで両端を丸くする点です。

.accordion-y__body

クリック(タップ)すると出るテキストの外枠です。マージン0でカツカツに。白背景を敷きます。クリック(タップ)されていない時はdisplay: none;で隠しておきます。

.accordion-y__body-in

クリック(タップ)すると出るテキストの中身です。上下パディングで高さを出します。line-heightを設定し、行間を空けます。文字色はメインカラーですね。相対配置で、上に乗せるアローアイコンの下地を作ります。

.accordion-y__icon

前回の.accordion__iconとほぼ同じですね。

お疲れ様でした！次は「モーダルを作る」です。