基本のアコーディオンと左からニュッと出るアレンジアコーディオン【コピペOK】

出来上がりのイメージ

左側からニュッと出てくる、アコーディオンのイメージです。
例のように段違いに長さをしてもOK、一律同じ長さにすることもできます。
角丸、四角のままもかわいいので、アレンジ自在ですよ。

はじめてアコーディオンを作る場合は、基本のアコーディオンから始めるにゃん！3つの段階に分けて、アコーディオンを進化させてみるにゃん！

基本のアコーディオン

まずは基本のアコーディオンです。

基本のアコーディオンの機能は３つ。

1. 表示したら一番上のアコーディオンは自動で開く
2. クリックしたら開く
3. アコーディオンが開いたら、他のアコーディオンは閉じる

こちらのアコーディオンにはjQueryを利用しているため、</body>の直前に、CDNを読み込んでおきましょう。

1<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

HTML、CSS、Javascriptのコードは、下記のコードをコピペして動かしてみてください。

アコーディオンの長さを変えて、デコボコにする

次に凸凹するように、アコーディオンの長さを変えていきます。

変更したのは3箇所です。

1. <ul>に、新しくplan__items_wrapというclassを追加
2. <li>に、新しくp-plan__itemというclassを追加
3. cssに凸凹用のスタイルを追加

plan__items_wrapに、アコーディオン全体のwidthの設定し、
p-plan__itemでは、偶数や奇数であれば…など、任意の条件を設定し、それぞれwidthを指定することで、凸凹した表現になります。

アコーディオンを左からニュッと出す

続いて、左側からアコーディオンが出てくるアニメーションを追加します。今回はアニメーションCSSを利用します。

アニメーションCSSを利用するために、CDNの読み込みが必要です。こちらのコードを<hrad></head>の直前に記載してください。

1<!--animate css-->
2<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">

変更した箇所は3箇所です。

1. <li>にfadeInLeftTriggerOnceのclassを追加
2. javascriptに、アニメーションのコードを追加
3. ページ表示時に、一番上のアコーディオンを開いていたjsを削除

左から出したいアコーディオンに、アニメーション用のトリガーとなるclassを追加します。jsのコードには、トリガーのclassが表示領域に入った際に、アニメーションcssのコードを追記するように指定します。

デモサイトのようなアコーディオンのソース

ここまでの３段階で、左からニュッと出てくるアコーディオンが実現しているかと思います。
あとはcssを整えて、お好みのアコーディオンを作ってみてください！

アコーディオンを角丸にして、背景色をつけると、ぐっと雰囲気が変わりますにゃん。

にゃん花子

FacebookInstagram

「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め｜文系から独学でWeb屋さんになった人｜インフラ分野のわかるWebディレクター｜主にWordpressのサイト立ち上げ、リプレイス、運用をしています｜PC画面にブツブツ呟きながら、制作するのが好きです｜坐骨神経痛とぎっくり腰経験済 | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中｜小学１年生の壁に負けじと２０２４年も奮闘します