基本のアコーディオンと左からニュッと出るアレンジアコーディオン【コピペOK】にゃんと役立つ!Wordpress手引き書サイトにゃんと役立つ!Wordpress手引き書サイト自分で更新できるワードプレスで自分だけのホームページの作り方やポイントを紹介中!非エンジニアのための、とっても役立つ、Wordpress手引き書サイトです。出来上がりのイメージ左側からニュッと出てくる、アコーディオンのイメージです。例のように段違いに長さをしてもOK、一律同じ長さにすることもできます。角丸、四角のままもかわいいので、アレンジ自在ですよ。アコーディオンを作る場合は、基本のアコーディオンから始めるにゃん!3つの段階に分けて、アコーディオンを進化させてみるにゃん!基本のアコーディオンまずは基本のアコーディオンです。基本のアコーディオンの機能は3つ。表示したら一番上のアコーディオンは自動で開くクリックしたら開くアコーディオンが開いたら、他のアコーディオンは閉じるこちらのアコーディオンにはjQueryを利用しているため、</body>の直前に、CDNを読み込んでおきましょう。crossorigin="anonymous"></script>HTML、CSS、Javascriptのコードは、下記のコードをコピペして動かしてみてください。CodePen.アコーディオンの長さを変えて、デコボコにする次に凸凹するように、アコーディオンの長さを変えていきます。変更したのは3箇所です。CodePen.plan__items_wrapに、アコーディオン全体のwidthの設定し、p-plan__itemでは、偶数や奇数であれば...など、任意の条件を設定し、それぞれwidthを指定することで、凸凹した表現になります。アコーディオンを左からニュッと出す続いて、左側からアコーディオンが出てくるアニメーションを追加します。今回はアニメーションCSSを利用します。アニメーションCSSを利用するために、CDNの読み込みが必要です。こちらのコードを<hrad></head>の直前に記載してください。href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">変更した箇所は3箇所です。CodePen.左から出したいアコーディオンに、アニメーション用のトリガーとなるclassを追加します。jsのコードには、トリガーのclassが表示領域に入った際に、アニメーションcssのコードを追記するように指定します。デモサイトのようなアコーディオンのソースここまでの3段階で、左からニュッと出てくるアコーディオンが実現しているかと思います。あとはcssを整えて、お好みのアコーディオンを作ってみてください!アコーディオンを角丸にして、背景色をつけると、ぐっと雰囲気が変わりますにゃん。役立つ!Wordpress手引き書サイト記事URLをコピーしました。