アコーディオンは、コンテンツの折りたたみを行える機能です。見出し領域をクリックすることでコンテンツの開閉が行えます。
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSだけのアコーディオンパネルのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.wrapper {
max-width: 760px;
margin: 0 auto;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* CSSだけのアコーディオンパネルの設定 */
h1 {
padding: 10px;
margin-bottom: 20px;
font-size: 1.6em;
background: steelblue;
color: #fff;
text-align: center;
}
h2 {
font-size: 1.4em;
padding: 10px;
color: #333;
}
.accordion-wrapper details {
padding: 10px;
margin: 10px 0;
border: #ccc 1px solid;
}
.accordion-wrapper details summary {
padding: 0 10px;
}
.accordion-wrapper details p {
padding: 20px;
margin: 10px 10px 10px 10px;
background: #eee;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- CSSだけのアコーディオンパネルの定義 -->
<div class="wrapper">
<div class="accordion-wrapper">
<details>
<summary>項目-01</summary>
<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
</details>
<details>
<summary>項目-02</summary>
<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
</details>
<details>
<summary>項目-03</summary>
<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
</details>
</div>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネルのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.wrapper {
max-width: 760px;
margin: 0 auto;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* アコーディオンパネルの設定 */
.accordion-area {
list-style: none;
}
.accordion-area li {
margin: 10px 0;
}
.accordion-area section {
border: #ccc 1px solid;
}
.title { /* アコーディオンのタイトル */
position: relative;
cursor: pointer;
font-size: 1rem;
font-weight: normal;
padding: 10px 10px 10px 50px;
transition: all .5s ease;
}
.title::before, /* アコーディオンのアイコン */
.title::after {
position: absolute;
content: '';
width: 15px;
height: 2px;
background: #333;
}
.title::before {
top: 48%;
left: 15px;
transform: rotate(0deg);
}
.title::after {
top: 48%;
left: 15px;
transform: rotate(90deg);
}
.title.close::before {
transform: rotate(45deg);
}
.title.close::after {
transform: rotate(-45deg);
}
.box { /* アコーディオンの内容 */
display: none;
padding: 20px;
margin: 0 20px 20px 20px;
background: #eee;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- アコーディオンパネルの定義 -->
<div class="wrapper">
<ul class="accordion-area">
<li>
<section>
<h2 class="title">項目-01</h2>
<div class="box">
<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
<li>
<section>
<h2 class="title">項目-02</h2>
<div class="box">
<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
<li>
<section>
<h2 class="title">項目-03</h2>
<div class="box">
<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
</ul>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$('.title').on('click', function() { // タイトル要素をクリックしたら内容を表示
var findElm = $(this).next(".box");
$(findElm).slideToggle();
if ($(this).hasClass('close')) { // アイコン（＋と×）を反転
$(this).removeClass('close');
}
else {
$(this).addClass('close');
}
});
$(window).on('load', function() { // ページ読み込み時に先頭を開く時は下記を有効に！
/*
$('.accordion-area li:first-of-type section').addClass("open");
$(".open").each(function(index, element) {
var Title =$(element).children('.title');
$(Title).addClass('close');
var Box =$(element).children('.box');
$(Box).slideDown(500);
});
*/
});
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</script>
</body>
</html>
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンパネルのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
.wrapper {
max-width: 760px;
margin: 0 auto;
}
/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* アコーディオンパネルの設定 */
.accordion-area {
list-style: none;
}
.accordion-area li {
margin: 10px 0;
}
.accordion-area section {
border: #ccc 1px solid;
}
.title { /* アコーディオンのタイトル */
position: relative;
cursor: pointer;
font-size: 1rem;
font-weight: normal;
padding: 10px 10px 10px 50px;
transition: all .5s ease;
}
.title::before, /* アコーディオンのアイコン */
.title::after {
position: absolute;
content: '';
width: 15px;
height: 2px;
background: #333;
}
.title::before {
top: 48%;
left: 15px;
transform: rotate(0deg);
}
.title::after {
top: 48%;
left: 15px;
transform: rotate(90deg);
}
.title.close::before {
transform: rotate(45deg);
}
.title.close::after {
transform: rotate(-45deg);
}
.box { /* アコーディオンの内容 */
display: none;
padding: 20px;
margin: 0 20px 20px 20px;
background: #eee;
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML（ここから）（※3） ▼▼▼ -->
<!-- アコーディオンパネルの定義 -->
<div class="wrapper">
<ul class="accordion-area">
<li>
<section>
<h2 class="title">項目-01</h2>
<div class="box">
<p>項目-01の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
<li>
<section>
<h2 class="title">項目-02</h2>
<div class="box">
<p>項目-02の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
<li>
<section>
<h2 class="title">項目-03</h2>
<div class="box">
<p>項目-03の説明です。<br>2行目です。<br>3行目です。</p>
</div>
</section>
</li>
</ul>
</div>
<!-- ▲▲▲ HTML（ここまで） ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT（ここから）（※4） ▼▼▼ -->
<!-- アコーディオンパネルの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$('.title').on('click', function() { // タイトル要素をクリックしたら内容を表示
$('.box').slideUp(500); // すべてのアコーディオンを閉じる
var findElm = $(this).next(".box");
if ($(this).hasClass('close')) { // アイコン（＋と×）を反転
$(this).removeClass('close');
}
else {
$('.close').removeClass('close');
$(this).addClass('close');
$(findElm).slideDown(500);
}
});
$(window).on('load', function() { // ページ読み込み時に先頭を開く時は下記を有効に！
/*
$('.accordion-area li:first-of-type section').addClass("open");
$(".open").each(function(index, element) {
var Title =$(element).children('.title');
$(Title).addClass('close');
var Box =$(element).children('.box');
$(Box).slideDown(500);
});
*/
});
</script>
<!-- ▲▲▲ SCRIPT（ここまで） ▲▲▲ -->
</body>
</html>
