ドロップダウンメニューを作成する際に中身のテキストが動かないようにしたい

上から下に徐々に開いていくQ&Aの部分を作成したいと思っています。JavaScriptでクラスの付け外しをしてCSSでアニメーションさせたいと思っています。
JavaScriptは問題なく動作しています。ドロップダウンするアニメーション自体も出来ています。現状の問題点は以下の点です。
・開閉した際に、パディングもアニメーションしてしまい、テキストの位置が左右でアニメーションしてしまう。
テキストが徐々に改行されていくような状況です。今はスマホ用のページを作っている(最終的にはレスポンシブ対応にしたい)ので、画面幅が狭く、特に目立ちます。

こちらを解消しようと、パディングをアニメーションしないようにすると、閉じるときにパディングが一気に消えておかしい。
最初からパディングをつけておくと、２つの質問事項の間に余計な余白ができてしまう。
見た目の調整でパディングはつけておきたいですが、パディング以外の方法で代用できるならそれでも構いません。

なにか良い解決方法がありましたらご教授いただけると幸いです。
よろしくお願いいたします。

HTMLはこちら

<div class="question__ttl">明日の天気は晴れか？</div>
<div class="question__answer">
  <p question__txt>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.  </p>
</div>
<div class="question__ttl">明日は木曜日か？</div>
<div class="question__answer">
  <p question__txt>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>

ＣＳＳはこちら

.question__ttl {
    display:inline-block;
    background-color:yellow;
    margin-bottom:30px;
    cursor:pointer;
}

.question__answer {
    height: 0;
    padding:0;
    overflow:hidden; 
    opacity:0;
    transition:0.5s;
    visibility:hidden;
/*     padding: 10px 20px 20px; */
/* ここにパディングをつけると上下に余計な余白がつく */ 

}
.question__answer.is-open {
    height:154px;
    padding: 10px 20px 20px;
    opacity:1;
    visibility:visible;
}

JavaScriptはこちら

document.addEventListener("DOMContentLoaded",() => {
  const title = document.querySelectorAll('.question__ttl');
  for(let i = 0 ;i < title.length;i++) {
    let titleEach = title[i] ;
    let content = titleEach.nextElementSibling;
    titleEach.addEventListener('click',() => {
      content.classList.toggle('is-open');
    });
  }
});

Jon_do

2020/10/28 09:46

.question__answer.is-open　と　.question__answer　どちらにも paddingを付けないというのではダメなのでしょうか？ダメなら追記した方が良いかと思います。

Akira_papa

2020/10/28 10:05

ご指摘ありがとうございます。追記しました。できればpaddingはつけておきたいと思っています。

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

回答1件

ベストアンサー

white-space: nowrap; とすることでブラウザの強制改行をさせないようにする
その後に改行したい位置に<br>タグを挿入

もしくはwidthを決めてその中に収まるようにする。

スマホ用のサイトとのことなので恐らく、レスポンシブ対応させたいのだろうと予測。
そこはメディアクエリで細かく調整する

html
1    <div class="question__ttl">明日の天気は晴れか？</div>
2    <div class="question__answer">
3        <p class="question__txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
4            has been
5            the
6            industry's standard dummy text ever since the 1500s, when an<br> unknown printer took a galley of type and
7            scrambled
8            it to make a type specimen book. </p>
9    </div>
10    <div class="question__ttl">明日は木曜日か？</div>
11    <div class="question__answer">
12        <p class="question__txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
13            has been
14            the
15            industry's standard dummy text ever since the 1500s, when an<br> unknown printer took a galley of type and
16            scrambled
17            it to make a type specimen book. </p>
18    </div>

css
1        .question__ttl {
2            display: inline-block;
3            background-color: yellow;
4            margin-bottom: 30px;
5            cursor: pointer;
6        }
7
8        .question__answer {
9            height: 0;
10            padding: 0;
11            overflow: hidden;
12            opacity: 0;
13            transition: 0.5s;
14            visibility: hidden;
15            white-space: nowrap;
16        }
17
18        .question__answer.is-open {
19            height: 154px;
20            opacity: 1;
21            visibility: visible;
22        }
23
24        .question__txt {
25            padding: 10px 20px 20px;
26        }

投稿2020/10/28 10:58

編集2020/10/28 17:31

Jon_do

総合スコア1373

Akira_papa

2020/10/28 13:19

ご回答ありがとうございます。ご指摘の方法を試してみました。たしかに改行はされていないですが、テキストの上下左右がpaddingがついている分だけ移動する形になります。閉じている状態の時にpaddingをつけると余計な隙間が開くため好ましくありません。メニューを開くと最初からテキストがそこにあったような状態(テキストが動かない状態)が理想の状態です。これを達成しようとした場合はパディングは使わずに何か他の方法を採るべきなのでしょうか？またJavaScriptにこだわらず、jQueryを使ったほうが簡単にできるものでしょうか？