JSFiddle - React, Tailwind, and code Playground
HTML
<details class="details js-details">
<summary class="details-summary js-details-summary"><span class="btn"></span>1つ目のアコーディオンのタイトル</summary>
<div class="details-content js-details-content">
<p>ここは、1つ目のアコーディオンの中身です。</p>
<button class="close-btn">閉じる</button>
</div>
</details>
<details class="details js-details">
<summary class="details-summary js-details-summary"><span class="btn"></span>2つ目のアコーディオンのタイトル</summary>
<div class="details-content js-details-content">
<p>ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。</p>
<p>ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。<br>
ここは、2つ目のアコーディオンの中身です。ここは、2つ目のアコーディオンの中身です。
</p>
<button class="close-btn">閉じる</button>
</div>
</details>
<details class="details js-details">
<summary class="details-summary js-details-summary"><span class="btn"></span>3つ目のアコーディオンのタイトル</summary>
<div class="details-content js-details-content">
<p>ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。</p>
<p>ここは、3つ目のアコーディオンの中身です。</p>
<p>ここは、3つ目のアコーディオンの中身です。<br>
ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。
</p>
<button class="close-btn">閉じる</button>
</div>
</details>
SCSS
.details {
border-top: 2px solid #00a5a0;
border-left: 2px solid #00a5a0;
border-right: 2px solid #00a5a0;
&:last-of-type {
border-bottom: 2px solid #00a5a0;
}
}
.details-summary {
position: relative;
display: block;
padding: 20px;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
background-color: #b2e4e2;
&:hover {
cursor: pointer;
opacity: 0.8;
}
.btn {
position: absolute;
top: 37%;
left: 10%;
width: 18px;
height: 18px;
transform-origin: center center;
transition-duration: 0.2s;
&:before,
&:after {
content: "";
background-color: #fff;
border-radius: 10px;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
transform-origin: center center;
}
&:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
}
&.is-active {
.btn {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
&:before {
content: none;
}
}
}
}
.details-summary::-webkit-details-marker {
display: none;
}
.details-content {
padding: 20px;
.close-btn {
display: block;
margin: 0 auto;
padding: 8px 32px;
background: #00a5a0;
color: #fff;
text-align: center;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
p {
margin: 0 0 20px;
color: #000;
font-size: 18px;
text-align: left;
&:last-of-type {
margin: 0 0 40px;
}
}
}
/* 以下の記述は不要です */
body {
margin: 20px;
}
JavaScript
$(document).ready(function() {
let accordionDetails = '.js-details';
let accordionSummary = '.js-details-summary';
let accordionContent = '.js-details-content';
let speed = 500;
$(accordionSummary).each(function() {
$(this).on("click", function(event) {
// summaryにis-activeクラスを切り替え
$(this).toggleClass("is-active");
// デフォルトの挙動を無効化
event.preventDefault();
if ($(this).parent($(accordionDetails)).attr("open")) {
// アコーディオンを閉じるときの処理
$(this).nextAll($(accordionContent)).slideUp(speed, function() {
// アニメーションの完了後にopen属性を取り除く
$(this).parent($(accordionDetails)).removeAttr("open");
// display:none;を消して、ページ内検索にヒットするようにする
$(this).show();
});
} else {
// アコーディオンを開くときの処理
// open属性を付ける
$(this).parent($(accordionDetails)).attr("open", "true");
// いったんdisplay:none;してからslideDownで開く
$(this).nextAll($(accordionContent)).hide().slideDown(speed);
}
});
$(this).closest(accordionDetails).find('.close-btn').on('click', function(eventclosee) {
eventclosee.preventDefault();
//「閉じる」ボタンがクリックされた場合にsummaryの.is-activeを外す
$(this).closest(accordionDetails).find(accordionSummary).removeClass("is-active");
//「閉じる」ボタンがクリックされた場合にdetails-contentを閉じる
$(this).closest(accordionContent).slideUp(speed, function() {
//「閉じる」ボタンがクリックされた場合にdetailsのopen属性を外す
$(this).closest(accordionDetails).removeAttr("open");
});
});
});
});