【UIKit使用】アコーディオン開閉をcssだけで作ります

こんにちは、高橋です。

コロナの影響で家飲みを余儀なくされていますが、
飲酒量がめちゃくちゃに増えてやばいです。誰かお助けを|･ω･`)ﾉ🍺🍺🍺🍺🍺🍺

さて、アコーディオンのデザインについて

★開いている時
★閉じた時

で違うデザインが提出されたのでUIKitで開発していきましょう。

今回の希望の見た目はこちらです( ･ω･)

フレームワークを使えば簡単にできましたので、メモがてら書いておきます。

※作業前にUIkitを下記サイトからダウンロード（インストール）しておきましょう。
CDNかnpmでインストールするのが楽です。今回はcssの編集しかしないですが、jsのダウンロードとリンクの紐付けも必須なのでお気をつけください|･ω･`)ﾉ
https://getuikit.com/

UIKitの使い方から分からない方はこちらの記事がおすすめです。

デザインは後でcssで整えるので、ご希望の動きをするものを選びましょう。

タブ切り替えの[MARKUP] 部分にソースが書いています。
https://getuikit.com/docs/accordion

コピったソースを少しいじって、css（sass）で見た目を整えたものがこちらです。

↑上記の見た目になっている場合、一度codepenのサイトにアクセスしてからページを更新すると閲覧できます！（悪質なサイバー攻撃等セキュリティ対策のCloudflareによるもの）

htmlにテキストを書くとクリックしたあとに文字を変える動きができないので、
「詳しく見る」「閉じる」のテキストをcss疑似要素(after要素)で変更しているのがポイントです(･`д･´)

.uk-open というのが、アコーディオンが開いた時の見栄えです。htmlにこのクラスは書いてないけど必要です。（クリックすると現れるclassです。）

あとは四角の部分に画像やアイコン（+-など）を付けると良いかなと思います。

よく使いそうなパーツはcodepenに書き溜めていこうと思います。。(；･`д･´)
ではでは〜。