【javascript】アコーディオンのボタンを＋からーにしたい

Question

実現したいこと

アコーディオンが開いた時、＋ボタンをーにしたいです。
JavaScriptへの理解が足りず、どう修正や追加をすればいいのかわからないのでお力をお借りしたいです。

前提

アコーディオンのタイトルにテキストと○を作る要素をflex-boxで横並びにしているのですが、○の中に疑似要素で作った＋を開いた時にはーにしたいのですがうまくいきません。

該当のソースコード

 <div class="accordion">
                <dl class="accordion__item 01">
                    <dt class="accordion__title">
                        <p class="accordion__title__text">タイトル</p>
                        <div class="accordion__title__btn"></div>
                    </dt>
                    <dd class="accordion__content">
                        <p>テキスト</p>
                    </dd>
                </dl>
                <dl class="accordion__item 01">
                    <dt class="accordion__title">
                        <p class="accordion__title__text">タイトル</p>
                        <div class="accordion__title__btn"></div>
                    </dt>
                    <dd class="accordion__content">
                        <p>テキスト</p>
                    </dd>
                </dl>
                <dl class="accordion__item 01">
                    <dt class="accordion__title">
                        <p class="accordion__title__text">タイトル</p>
                        <div class="accordion__title__btn"></div>
                    </dt>
                    <dd class="accordion__content">
                        <p>テキスト</p>
                    </dd>
                </dl>
    </div>

.accordion {
    width: 100%;
    text-align: left;

    &__item {
        width: 100%;
    }

    &__title {
        width: 100%;
        height: 64px;
        background-color: #F6F3DC;
        box-shadow: 8px 10px 10px 0px #20202033;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50px 0 51px;
        margin: 0 0 10px 0;

        &__text {
            font-family: $family-font, sans-serif;
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
        }

        &__btn {
            border: 1px;
            border-color: #222222;
            border-style: solid;
            border-radius: 50%;
            background-color: #F6F3DC;
            width: 44px;
            height: 44px;
            position: relative;

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                background-color: #222222;
            }

            &::before {
                right: 10px;
                width: 24px;
                height: 1px;
                transform: translate(0, -50%);
            }

            &::after {
                // 横幅10pxを足しての30px
                right: 22px;
                width: 1px;
                height: 24px;
                transform: translate(50%, -50%);
            }

        }

        &__btn.is-active::after {
            opacity: 0;
        }

    }

    &__item+&__item {
        margin-top: 5px;
    }

    &__content {
        background-color: white;
        padding: 24px 53px 22px 50px;
        display: none;
        margin: 0 0 30px 0;

        p {
            font-family: $family-font, sans-serif;
            font-size: 16px;
            line-height: 1.75;
        }
    }
}

// * accordion * //
window.addEventListener('DOMContentLoaded', function () {
  // slideUp
  function slideUp(el, duration = 300) {
      el.style.height = el.offsetHeight + "px";
      el.offsetHeight;
      el.style.transitionProperty = "height, margin, padding";
      el.style.transitionDuration = duration + "ms";
      el.style.transitionTimingFunction = "ease";
      el.style.overflow = "hidden";
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
      el.style.marginTop = 0;
      el.style.marginBottom = 0;
      setTimeout(() => {
          el.style.display = "none";
          el.style.removeProperty("height");
          el.style.removeProperty("padding-top");
          el.style.removeProperty("padding-bottom");
          el.style.removeProperty("margin-top");
          el.style.removeProperty("margin-bottom");
          el.style.removeProperty("overflow");
          el.style.removeProperty("transition-duration");
          el.style.removeProperty("transition-property");
          el.style.removeProperty("transition-timing-function");
      }, duration);
  };
  // slideDown
  function slideDown(el, duration = 300) {
      el.style.removeProperty("display");
      let display = window.getComputedStyle(el).display;
      if (display === "none") {
          display = "block";
      }
      el.style.display = display;
      let height = el.offsetHeight;
      el.style.overflow = "hidden";
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
      el.style.marginTop = 0;
      el.style.marginBottom = 0;
      el.offsetHeight;
      el.style.transitionProperty = "height, margin, padding";
      el.style.transitionDuration = duration + "ms";
      el.style.transitionTimingFunction = "ease";
      el.style.height = height + "px";
      el.style.removeProperty("padding-top");
      el.style.removeProperty("padding-bottom");
      el.style.removeProperty("margin-top");
      el.style.removeProperty("margin-bottom");
      setTimeout(() => {
          el.style.removeProperty("height");
          el.style.removeProperty("overflow");
          el.style.removeProperty("transition-duration");
          el.style.removeProperty("transition-property");
          el.style.removeProperty("transition-timing-function");
      }, duration);
  };
  // slideToggle
  function slideToggle(el, duration = 300) {
      if (window.getComputedStyle(el).display === "none") {
          return slideDown(el, duration);
      } else {
          return slideUp(el, duration);
      }
  };

  function getSiblings(e) {
      // for collecting siblings
      let siblings = [];
      // if no parent, return no siblings
      if(!e.parentNode) {
          return siblings;
      }
      // first child of the parent node
      let sibling =  e.parentNode.firstChild;

      // collecting siblings
      while (sibling) {
          if (sibling.nodeType === 1 && sibling !== e) {
              siblings.push(sibling);
          }
          sibling = sibling.nextSibling;
      }
      return siblings;
  }

  function getParents(element) {
      var parent = element.parentNode;
      return getSiblings(parent);
  }

  var accordionTitles = document.querySelectorAll('.accordion__title');
    var accordionContents = document.querySelectorAll('.accordion__content');
    accordionTitles.forEach((accordionTitle, i) => {
        accordionTitle.addEventListener('click', function() {
            accordionTitle.classList.toggle('is-active');
            slideToggle(accordionTitle.nextElementSibling,1000); 

            // var accordionItems = getParents(accordionTitle);
            // console.log(accordionItems);
            // accordionItems.forEach(accordionItem => {
            //     var targetTitle = accordionItem.querySelector('.accordion__title');
            //     var targetContent = accordionItem.querySelector('.accordion__content');
            //     slideUp(targetContent);
            //     targetTitle.classList.remove('is-active');
            // })
        })
    })
})

試したこと

.accordion__title__btnに.is-activeを付け、疑似要素の::afterをopacity:0;にしようとjavascriptの記述に追加してみましたが、動きませんでした。

補足情報

以下のようにしたいと思っています。
https://gyazo.com/b33ef061d9c0f3def673ca2e75fc9d51

Answer 1

とりあえず表示だけの問題なら以下をCSSに記載ください

.is-active .accordion__title__btn::after{
width:0;
}

Comments

[natskonatsu]

回答いただきありがとうございました！
とても助かりました。