<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> </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> </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> </div> </details>
.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; p { margin: 0 0 20px; color: #000; font-size: 18px; text-align: left; &:last-of-type { margin: 0 0 0; } } } /* 以下の記述は不要です */ body { margin: 20px; }
let accordionDetails = '.js-details'; let accordionSummary = '.js-details-summary'; let accordionContent = '.js-details-content'; let speed = 300 $(accordionSummary).each(function() { $(this).on("click", function(event) { // デフォルトの挙動を無効化 event.preventDefault(); // summaryにis-activeクラスを切り替え $(this).toggleClass("is-active"); if ($(this).parent($(accordionDetails)).attr("open")) { // アコーディオンを閉じるときの処理 $(this).nextAll($(accordionContent)).slideUp(speed, function() { // アニメーションの完了後にopen属性を取り除く $(this).parent($(accordionDetails)).removeAttr("open"); }); } else { // アコーディオンを開くときの処理 // open属性を付ける $(this).parent($(accordionDetails)).attr("open", "true"); // いったんdisplay:none;してからslideDownで開く $(this).nextAll($(accordionContent)).hide().slideDown(speed); } }) })