前回のものと似ていますが別パターンです。デイトラのサイドバーがまさにこの形式ですね！ブログの月別アーカイブなど、汎用的で色々なところに使えそうです。下準備として、上下のアローアイコン画像をカンプから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とほぼ同じですね。
お疲れ様でした！次は「モーダルを作る」です。
コメント