<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 = 500; $(accordionDetails).on("mouseenter", function(event) { // summaryにis-activeクラスを切り替え $(this).find(accordionSummary).addClass("is-active"); // open属性を付ける $(this).attr("open", "true"); // いったんdisplay:none;してからslideDownで開く $(this).find(accordionContent).hide().slideDown(speed); }); $(accordionDetails).on("mouseleave", function(event) { // summaryからis-activeクラスを削除 $(this).find(accordionSummary).removeClass("is-active"); // アコーディオンを閉じるときの処理 $(this).find(accordionContent).slideUp(speed, function() { // アニメーションの完了後にopen属性を取り除く $(this).parent($(accordionDetails)).removeAttr("open"); // display:none;を消して、ページ内検索にヒットするようにする $(this).show(); }); });