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

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

新規登録して質問してみよう
ただいま回答率
85.44%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

631閲覧

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

natsupurin

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/25 11:38

実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

CSS

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

投稿2023/03/27 00:58

yambejp

総合スコア115226

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

natsupurin

2023/03/27 03:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問