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

実現したいこと

アコーディオンが開いた時、＋ボタンをーにしたいです。
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件

ベストアンサー

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

CSS
1.is-active .accordion__title__btn::after{
2width:0;
3}

投稿2023/03/27 00:58

yambejp

総合スコア114839

natskonatsu

2023/03/27 03:42

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！