学習猫
PR

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

にゃん花子
記事内に商品プロモーションを含む場合があります
Google広告

出来上がりのイメージ

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

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

基本のアコーディオン

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

基本のアコーディオンの機能は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のコードを追記するように指定します。

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

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

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

Google広告
ABOUT ME
にゃん花子
にゃん花子
「コード書くには苦手」「コピペで動けば、それでOK」な、ノンプログラマー向け | マニアック・ピンポイントなWordpress TIPSが多め|文系から独学でWeb屋さんになった人|インフラ分野のわかるWebディレクター|主にWordpressのサイト立ち上げ、リプレイス、運用をしています|Shopifyもはじめました | アニメ・映画・ドラマを聴きながら、ブツブツ呟きながら、制作するのが好きです | ブログ収益を保護猫活動に使いたいので、頑張る人 | 夜型人間から朝方に切り替え中|小学1年生の壁に負けじと2024年も奮闘します
Google検索
記事URLをコピーしました