習い事・勉強・学童お問い合わせトリガーより上に開くアコーディオンとcssのみで実装できる開閉時アイコンが切り替わるアコーディオン2019.01.26サイト制作webメモHOMEWeb関連サイト制作トリガーより上に開くアコーディオンとcssのみで実装できる開閉時アイコンが切り替わるアコーディオントリガーより下に開閉する方法はネットで少し調べてみると出てきたのですが、トリガーより上に開く方法がなかなかでてこなかったのでこちらでもまとめておきたいと思います。CSS1、トリガーより上に開くアコーディオンこちらはjqueryを使用します。私はjsとcssで同じclassやIDを指定しないようにしています。どちらの修正が発生しても影響のない方が無難ですね!今回はjs側の指定にはIDを使用しました。ID名も後々分かりやすいようjs-xxxと命名。参考サイトにjqueryの内容が説明されています!こういった素晴らしい参考サイトが沢山あって本当に助かります。class=”js-demo-link”>より前のタグ.prev()が.slideToggle()します。$(this).toggleClass(“close”);で、ボタンをクリックするたびに.closeのクラスを.demo__textに追加したり、除去したりします。10;}切り替わるテキストにinputとlabelタグを使用し、デザインをlabelに適応させます。demo__item__inputは非表示(display:none;)にします。demo__item__labelにデザインを指定し、擬似要素afterにアイコンデザインを指定します。demo__item__input:checked~label:afterで切り替え後のアイコンデザインを指定します。demo__item__bodyははじめheight:0;で非表示となっていますが、demo__item__input:checked~.demo__item__bodyでheight:auto;にして表示させています。#aaa;}こちらも「2、CSSのみで実装できる開閉時アイコンが切り替わるアコーディオン」と同様input要素を非表示にし、label要素にデザインを指定していきます。チェックアイコンは擬似要素before、afterで指定しています。inputのchecked時にクリック後のデザインを指定しています。2018.09.08ターミナルでよく使うコマンドとGitでのよく使う作業の流れを自分のメモ用にまとめました。コメントをキャンセルメールアドレスが公開されることはありません。(20)プロフィール都内在住30代小学生と保育園児の子を持つワーママです。最近やっと保育園の二ヶ所送迎から解放され育児にも少しだけ余裕がもてるようになりました。