アコーディオンメニューは一度に表示する情報を減らすことで、ユーザーが必要な情報を探しやすくなり、見栄えもすっきりとしたデザインになります。
また、スマートフォンなどの小さな画面でも使いやすく、Q&Aやよくある質問ページなどに最近ではよく採用されています。
目次
アコーディオンメニューDEMO
まずは実装内容を確認しましょう、DEMOページをご覧ください。
コピペ用実装コード
index.html style.css script.jsを作成し、以下のコードを貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>アコーディオン</title>
<meta name="Keywords" content="アコーディオン" />
<meta name="Description" content="アコーディオン" />
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<nav>
<ul>
<li class="list">
<p class="title">返品期限はいつまでですか？</p>
<p class="box">お買い上げから7日以内であれば、返品を受け付けております。</p>
</li>
<li class="list">
<p class="title">返品方法はどうすればいいですか？</p>
<p class="box">商品到着後、返品申請フォームよりお申し込みください。</p>
</li>
<li class="list">
<p class="title">返金はいつ受け取れますか？</p>
<p class="box">返品商品の確認後、7営業日以内に返金手続きを行います。</p>
</li>
<li class="list">
<p class="title">サポートの営業時間は何時から何時までですか？</p>
<p class="box">平日の9:00〜18:00となっております。</p>
</li>
<li class="list">
<p class="title">サポートの連絡先はどこですか？</p>
<p class="box">メール、お電話、チャットにてお問い合わせを受け付けております。</p>
</li>
</ul>
</nav>
</body>
</html>@charset "utf-8";
body {
color: #ffffff;
background: url(https://www.solluna.blog/wp-content/uploads/2023/03/bg-accordion.jpg) no-repeat top #FFFFFF;
}
/* リセットCSS */
* {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
margin: 50px auto 0;
max-width: 600px;
width: 100%;
}
.list:not(:first-child) {
margin-top: 10px;
}
.title {
background: #87ADD9;
cursor: pointer;
font-size: 18px;
padding: 20px 30px;
position: relative;
}
.title:before {
position: absolute;
content: '';
top: 50%;
right: 25px;
height: 2px;
width: 15px;
background: #2B334F;
transform: rotate(90deg);
transition: all .3s ease-in-out;
}
.title:after {
position: absolute;
content: '';
top: 50%;
right: 25px;
height: 2px;
width: 15px;
background: #2B334F;
transition: all .3s ease-in-out;
}
.title.open:before {
transform: rotate(180deg);
}
.title.open:after {
opacity: 0;
}
.box {
color: #87ADD9;
background: #FFFFFF;
border-left: 1px solid #87ADD9;
border-right: 1px solid #87ADD9;
border-bottom: 1px solid #87ADD9;
display: none;
padding: 20px 30px;
}$(function () {
$(".list:first-of-type .box").css("display", "block"); //一番目開いておく//
$(".list:first-of-type .title").addClass("open");
$(".title").on("click", function () {
$(".title").not(this).removeClass("open");
$(".title").not(this).next().slideUp(200);
$(this).toggleClass("open");
$(this).next().slideToggle(200);
});
});実装方法
See the Pen アコーディオン by SOLLUNA (@ygi) on CodePen.
HTML
headタグの中にCSSを読み込みます。
<link rel="stylesheet" href="css/style.css">headタグの中にjQueryを読み込むためのCDNリンクを追加します。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>headタグの中にJSを読み込みます。
<script src="js/script.js"></script>CSS
:not(:first-child)「最初の子要素以外の要素に対して、以下のスタイルを適用する」という意味です。
この場合、2番目のli要素からはmargin-top: 10px;が適用されます。
.list:not(:first-child) {
margin-top: 10px;
}JS
addClassメソッド、removeClassメソッド
addClassメソッドを使うことで、HTML要素にCSSスタイルを適用することができます。また、removeClassメソッドを使うことで、追加されたクラスを削除することもできます。
$(function () {
$(".list:first-of-type .box").css("display", "block"); //一番目開いておく//
$(".list:first-of-type .title").addClass("open");
$(".title").on("click", function () {
$(".title").not(this).removeClass("open");
$(".title").not(this).next().slideUp(200);
$(this).toggleClass("open");
$(this).next().slideToggle(200);
});
});アコーディオンメニューは、コンテンツを折りたたむことが可能なので、スペースを節約も出来ます。かつ、開閉方法やアニメーション、フォントやカラースキームなど、様々な要素をカスタマイズすることができます。
これさえ覚えておけば実務で有効に活用出来ます。