<details class="details js-details layer1"> <summary class="details-summary js-details-summary layer1"><span class="btn"></span>1つ目のアコーディオンのタイトル</summary> <div class="details-content js-details-content layer1"> <details class="details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>A</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">A-a</p> <p class="details-content-item layer3">A-b</p> </div> </details> <details class="details js-details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>B</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">B-a</p> <details class="details js-details layer3"> <summary class="details-summary js-details-summary layer3"><span class="btn"></span>B-b</summary> <div class="details-content js-details-content layer3"> <p class="details-content-item layer4">B-b-1</p> <p class="details-content-item layer4">B-b-2</p> </div> </details> </div> </details> </div> </details> <details class="details js-details layer1"> <summary class="details-summary js-details-summary layer1"><span class="btn"></span>2つ目のアコーディオンのタイトル</summary> <div class="details-content js-details-content layer1"> <details class="details js-details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>A</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">A-a</p> <p class="details-content-item layer3">A-b</p> </div> </details> <details class="details js-details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>B</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">B-a</p> <details class="details js-details layer3"> <summary class="details-summary js-details-summary layer3"><span class="btn"></span>B-b</summary> <div class="details-content js-details-content layer3"> <p class="details-content-item layer4">B-b-1</p> <p class="details-content-item layer4">B-b-2</p> </div> </details> </div> </details> </div> </details> <details class="details js-details layer1"> <summary class="details-summary js-details-summary layer1"><span class="btn"></span>3つ目のアコーディオンのタイトル</summary> <div class="details-content js-details-content layer1"> <details class="details js-details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>A</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">A-a</p> <p class="details-content-item layer3">A-b</p> </div> </details> <details class="details js-details layer2"> <summary class="details-summary js-details-summary layer2"><span class="btn"></span>B</summary> <div class="details-content js-details-content layer2"> <p class="details-content-item layer3">B-a</p> <details class="details js-details layer3"> <summary class="details-summary js-details-summary layer3"><span class="btn"></span>B-b</summary> <div class="details-content js-details-content layer3"> <p class="details-content-item layer4">B-b-1</p> <p class="details-content-item layer4">B-b-2</p> </div> </details> </div> </details> </div> </details>
.details { &.layer1 { 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; &.layer1 { background-color: #b2e4e2; } &.layer2 { background-color: #7fd2cf; } &.layer3 { background-color: #4cc0bc; } &: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 { color: #fff; font-size: 24px; font-weight: bold; text-align: center; } .details-content-item { padding: 20px; &.layer3 { background-color: #4cc0bc; } &.layer4 { background-color: #19aea9; } &:hover { cursor: pointer; opacity: 0.8; } } /* 以下の記述は不要です */ body { margin: 20px; }
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"); }); } else { // アコーディオンを開くときの処理 // open属性を付ける $(this).parent($(accordionDetails)).attr("open", "true"); // いったんdisplay:none;してからslideDownで開く $(this).nextAll($(accordionContent)).hide().slideDown(speed); } }) })