Q&A
実現したいこと
アコーディオンが開いた時、+ボタンをーにしたいです。
JavaScriptへの理解が足りず、どう修正や追加をすればいいのかわからないのでお力をお借りしたいです。
前提
アコーディオンのタイトルにテキストと○を作る要素をflex-boxで横並びにしているのですが、○の中に疑似要素で作った+を開いた時にはーにしたいのですがうまくいきません。
該当のソースコード
html
1 <div class="accordion"> 2 <dl class="accordion__item 01"> 3 <dt class="accordion__title"> 4 <p class="accordion__title__text">タイトル</p> 5 <div class="accordion__title__btn"></div> 6 </dt> 7 <dd class="accordion__content"> 8 <p>テキスト</p> 9 </dd> 10 </dl> 11 <dl class="accordion__item 01"> 12 <dt class="accordion__title"> 13 <p class="accordion__title__text">タイトル</p> 14 <div class="accordion__title__btn"></div> 15 </dt> 16 <dd class="accordion__content"> 17 <p>テキスト</p> 18 </dd> 19 </dl> 20 <dl class="accordion__item 01"> 21 <dt class="accordion__title"> 22 <p class="accordion__title__text">タイトル</p> 23 <div class="accordion__title__btn"></div> 24 </dt> 25 <dd class="accordion__content"> 26 <p>テキスト</p> 27 </dd> 28 </dl> 29 </div>
css
1.accordion { 2 width: 100%; 3 text-align: left; 4 5 &__item { 6 width: 100%; 7 } 8 9 &__title { 10 width: 100%; 11 height: 64px; 12 background-color: #F6F3DC; 13 box-shadow: 8px 10px 10px 0px #20202033; 14 cursor: pointer; 15 display: flex; 16 align-items: center; 17 justify-content: space-between; 18 padding: 0 50px 0 51px; 19 margin: 0 0 10px 0; 20 21 &__text { 22 font-family: $family-font, sans-serif; 23 font-size: 24px; 24 font-weight: bold; 25 line-height: 1.2; 26 } 27 28 &__btn { 29 border: 1px; 30 border-color: #222222; 31 border-style: solid; 32 border-radius: 50%; 33 background-color: #F6F3DC; 34 width: 44px; 35 height: 44px; 36 position: relative; 37 38 &::before, 39 &::after { 40 content: ''; 41 position: absolute; 42 top: 50%; 43 background-color: #222222; 44 } 45 46 &::before { 47 right: 10px; 48 width: 24px; 49 height: 1px; 50 transform: translate(0, -50%); 51 } 52 53 &::after { 54 // 横幅10pxを足しての30px 55 right: 22px; 56 width: 1px; 57 height: 24px; 58 transform: translate(50%, -50%); 59 } 60 61 } 62 63 &__btn.is-active::after { 64 opacity: 0; 65 } 66 67 } 68 69 &__item+&__item { 70 margin-top: 5px; 71 } 72 73 &__content { 74 background-color: white; 75 padding: 24px 53px 22px 50px; 76 display: none; 77 margin: 0 0 30px 0; 78 79 p { 80 font-family: $family-font, sans-serif; 81 font-size: 16px; 82 line-height: 1.75; 83 } 84 } 85}
javascript
1// * accordion * // 2window.addEventListener('DOMContentLoaded', function () { 3 // slideUp 4 function slideUp(el, duration = 300) { 5 el.style.height = el.offsetHeight + "px"; 6 el.offsetHeight; 7 el.style.transitionProperty = "height, margin, padding"; 8 el.style.transitionDuration = duration + "ms"; 9 el.style.transitionTimingFunction = "ease"; 10 el.style.overflow = "hidden"; 11 el.style.height = 0; 12 el.style.paddingTop = 0; 13 el.style.paddingBottom = 0; 14 el.style.marginTop = 0; 15 el.style.marginBottom = 0; 16 setTimeout(() => { 17 el.style.display = "none"; 18 el.style.removeProperty("height"); 19 el.style.removeProperty("padding-top"); 20 el.style.removeProperty("padding-bottom"); 21 el.style.removeProperty("margin-top"); 22 el.style.removeProperty("margin-bottom"); 23 el.style.removeProperty("overflow"); 24 el.style.removeProperty("transition-duration"); 25 el.style.removeProperty("transition-property"); 26 el.style.removeProperty("transition-timing-function"); 27 }, duration); 28 }; 29 // slideDown 30 function slideDown(el, duration = 300) { 31 el.style.removeProperty("display"); 32 let display = window.getComputedStyle(el).display; 33 if (display === "none") { 34 display = "block"; 35 } 36 el.style.display = display; 37 let height = el.offsetHeight; 38 el.style.overflow = "hidden"; 39 el.style.height = 0; 40 el.style.paddingTop = 0; 41 el.style.paddingBottom = 0; 42 el.style.marginTop = 0; 43 el.style.marginBottom = 0; 44 el.offsetHeight; 45 el.style.transitionProperty = "height, margin, padding"; 46 el.style.transitionDuration = duration + "ms"; 47 el.style.transitionTimingFunction = "ease"; 48 el.style.height = height + "px"; 49 el.style.removeProperty("padding-top"); 50 el.style.removeProperty("padding-bottom"); 51 el.style.removeProperty("margin-top"); 52 el.style.removeProperty("margin-bottom"); 53 setTimeout(() => { 54 el.style.removeProperty("height"); 55 el.style.removeProperty("overflow"); 56 el.style.removeProperty("transition-duration"); 57 el.style.removeProperty("transition-property"); 58 el.style.removeProperty("transition-timing-function"); 59 }, duration); 60 }; 61 // slideToggle 62 function slideToggle(el, duration = 300) { 63 if (window.getComputedStyle(el).display === "none") { 64 return slideDown(el, duration); 65 } else { 66 return slideUp(el, duration); 67 } 68 }; 69 70 function getSiblings(e) { 71 // for collecting siblings 72 let siblings = []; 73 // if no parent, return no siblings 74 if(!e.parentNode) { 75 return siblings; 76 } 77 // first child of the parent node 78 let sibling = e.parentNode.firstChild; 79 80 // collecting siblings 81 while (sibling) { 82 if (sibling.nodeType === 1 && sibling !== e) { 83 siblings.push(sibling); 84 } 85 sibling = sibling.nextSibling; 86 } 87 return siblings; 88 } 89 90 function getParents(element) { 91 var parent = element.parentNode; 92 return getSiblings(parent); 93 } 94 95 var accordionTitles = document.querySelectorAll('.accordion__title'); 96 var accordionContents = document.querySelectorAll('.accordion__content'); 97 accordionTitles.forEach((accordionTitle, i) => { 98 accordionTitle.addEventListener('click', function() { 99 accordionTitle.classList.toggle('is-active'); 100 slideToggle(accordionTitle.nextElementSibling,1000); 101 102 // var accordionItems = getParents(accordionTitle); 103 // console.log(accordionItems); 104 // accordionItems.forEach(accordionItem => { 105 // var targetTitle = accordionItem.querySelector('.accordion__title'); 106 // var targetContent = accordionItem.querySelector('.accordion__content'); 107 // slideUp(targetContent); 108 // targetTitle.classList.remove('is-active'); 109 // }) 110 }) 111 }) 112})
試したこと
.accordion__title__btnに.is-activeを付け、疑似要素の::afterをopacity:0;にしようとjavascriptの記述に追加してみましたが、動きませんでした。
補足情報
以下のようにしたいと思っています。
https://gyazo.com/b33ef061d9c0f3def673ca2e75fc9d51
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/27 03:42