2018年2月14日

デザイン

【js】jQueryでできるアコーディオンメニューの作成

jQueryでつくるアコーディオンメニューの作成jQueryでつくるアコーディオンメニューの作成

目次

  1. はじめに
  2. HTML・CSSの準備
  3. jQueryの記述
  4. まとめ

はじめに

本記事はjQueryを使用した、アコーディオンパネルの作成についてご紹介します。
よくスマートフォンのWebサイトのデザインで見かけるアコーディオンパネルですが、仕組みがわからないまま使用しているかたもいらっしゃるのではないでしょうか?今回は解説を交えながら紹介します!

今回の記事で作成するでもはこちらになります

See the Pen Accordion by takashi yamakawa (@y_taka520) on CodePen.

HTML・CSSの準備

まずはアコーディオンパネルを実装する準備として縦並びに要素を配置します。今回は3つ配置します。

HTML

<div class="container-1">
<h2 class="ttl-1">Title 01</h2>
<div class="inner-1">
<h3>Title01</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-2">
<h2 class="ttl-2">Title 02</h2>
<div class="inner-2">
<h3>Title02</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-3">
<h2 class="ttl-3">Title 03</h2>
<div class="inner-3">
<h3>Title03</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-1">
<h2 class="ttl-1">Title 01</h2>
<div class="inner-1">
<h3>Title01</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-2">
<h2 class="ttl-2">Title 02</h2>
<div class="inner-2">
<h3>Title02</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>
<div class="container-3">
<h2 class="ttl-3">Title 03</h2>
<div class="inner-3">
<h3>Title03</h3>
<p>ここに文字が入ります。ここに文字が入ります。ここに文字が入ります。</p>
<div class="btn">
<p>もっとくわしく</p>
</div>
</div>
</div>

CSS

.container-1, .container-2, .container-3 {
padding:48px;
}
.container-1 {
background-color:#FBC418;
}
.container-2 {
background-color:#00649F;
}
.container-3 {
background-color:#259F6C;
}

.inner-1, .inner-2, .inner-3 {
margin:0 auto;
width:480px;
background-color:$white;
padding:32px;
box-shadow:0 2px 3px $gray;
}

.btn {
margin:24px auto;
width:200px;
height:60px;
background-color:#999;
color:#fff;
text-align:center;
line-height:60px;
box-shadow:0 1px 2px #gray;
}

screenshot-codepen.io-2017-12-21-15-18-11-155.png (52.2 kB)

これで要素が縦に3つ並びました。

次にこの要素の中の本文はクリックしたら表示する仕組みにしたいので、普段は表示しないように設定します。
display要素にnoneを指定します。

.inner-1, .inner-2, .inner-3 {
margin:0 auto;
width:480px;
background-color:$white;
padding:32px;
box-shadow:0 2px 3px $gray;
display:none;
}

screenshot-codepen.io-2017-12-21-15-20-09-025.png (10.8 kB)

これでHTMLとCSSの準備は完了です。

jQueryの記述

HTMLとCSSの記述が終わったらいよいよjQueryで動きを付けていきます。まずは一つ目の一番上にある要素に焦点をあててjQueryを記述していきます。

$(document).ready(function(){
$('.container-1').click(function(){
$('.inner-1').slideToggle(800);
$('.ttl-1').slideToggle(800);
});
});

記述したコードについて解説をしていきます。
まず、2行目でcontainer-1クリックしたら()内の処理を行うと宣言し、3、4行目で実際の処理を記述しています。
このslideToggle()とはslideUp()(要素をスライド表示させる関数)とslideDown()(要素をスライドで非表示にさせる関数)を交互に実行するという便利な関数です。これだけでも表示非表示の動きになるかと思います。

現在の状態では表示非表示の動作が不自然なので、より自然になるようにアニメーションを組み合わせていきます。
まずは先ほどのjavascriptに以下を書き足していきます。

$(document).ready(function(){
$('.container-1').click(function(){
$('.inner-1').slideToggle(800);
$('.inner-1').toggleClass('anime');
$('.inner-1').toggleClass('anime-reverse');
$('.ttl-1').slideToggle(800);
$('.ttl-1').toggleClass('anime');
$('.ttl-1').toggleClass('anime-reverse');
});
});

追加した行のtoggleClass()はaddClass()(要素にクラスを付与する関数)とremoveClass()(要素からクラスを外す関数)を交互に実行する関数です。先ほど出てきたslideToggle()と似たような性質をもっています。このほかにもtoggleとつく関数はいくつかあり、それらをうまく使うことでプログラムの行数を少なくすることができます。

次に先ほどtoggleClass()で指定した二つのクラスにアニメーションを追加します。

CSS

.anime {
animation : anime 2s ease;
}
.anime-reverse {
animation : anime-reverse 0.8s ease;
}

@keyframes anime {
0% {
filter:opacity(0);
margin-top:-32px
}
100% {
filter:opacity(1);
margin-top:0px;
}
}
@keyframes anime-reverse {
0% {
filter:opacity(1);
}
100% {
filter:opacity(0);
}
}

この二つのアニメーションにはそれぞれフェードインとフェードアウト二つのアニメーションを指定しており、これを先ほどのtoggleClass()で交互に付与することでアニメーションを実行しています。

残りの二つにも同様の処理を記述することで完成です。

まとめ

以上jQueryを使用したアコーディオンメニューの作成と解説でした!
jQueryと聞くと難しいイメージが先行してしまいがちですが、少しづつ勉強していくことで、アニメーションのあるWebサイトも自分で作成することができ、デザインの幅が広がります。試してみてはいかがでしょうか?

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP