slideToggleとpaddingについて

Question

下のようなコードでは.flow-itemBottomの動きが自分の思った通りに動きません。
このコードでは、slideToggleで.flow-itemBottom内のテキストが少しだけ下にスライドしてでてきてしまいます。テキストを動かずにスライドして表示するには今のところpadding-topをなくすしかありません。本来はpadding-topをあてて余白を入れたいところなのですが、何か良い方法はありませんか？
.flow-itemBottomのpaddingのtopが原因だと思います。

        <!-- flow -->
        <section class="flow">
            <div class="flow-inner">
                <h2 class="flow-ttl"><i class="fas fa-laptop"></i>受講の流れ</h2>
                <div class="flow-box">
                    <ul class="flow-list">
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/skypeconsulting.png" alt="">
                                <h3 class="flow-itemTtl">Skypeで事前コンサル</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p>
                                <p class="flow-itemBold">簡単なテストあり</p>
                                <p class="flow-itemTxt">
                                    iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。
                                    （テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。）
                                </p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/preworks.png" alt="">
                                <h3 class="flow-itemTtl">事前課題の提出</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">出発前の１ヶ月前に事前課題を送ります。</p>
                                <p class="flow-itemTxt">０から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP
                                    / Mysqlの事前講座</p>
                                <p class="flow-itemBold">課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。
                                    回数無制限のチャットサポート付きですので、最初は努力してください。<br>
                                    また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/flight.png" alt="">
                                <h3 class="flow-itemTtl">現地に渡航</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">到着日には空港でお出迎えし、初日のオリエンテーションを行います。
                                    滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</p>
                                <p class="flow-itemBold">iSaraは『ノマド』フリーランス養成講座です。
                                    楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。
                                </p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/personwithlight.png" alt="">
                                <h3 class="flow-itemTtl">実案件を通して学ぶ</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
                                <p class="flow-itemBold">案件獲得のためのメールの書き方や見積りの仕方など、
                                    他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
                                <p class="flow-itemTxt">＊現役フリーランスがサポートします。</p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/jobsupport.png" alt="">
                                <h3 class="flow-itemTtl">帰国後の仕事獲得サポート付き</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p>
                                <p class="flow-itemBold">iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。
                                    もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

// flow
.flow-inner {
  padding: 0 16px 60px;
  .flow-ttl {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.2;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 2em 0;
    i {
      font-size: 1.4rem;
    }
  }
}
.flow-item {
  background-color: #FDF5E0;
  border-radius: 3px;
  &:not(:last-of-type) {
    margin-bottom: 3px;
  }
  .flow-itemTop {
    display: flex;
    align-items: center;
    padding: 10px 13px;
    position: relative;
    &::after {
      content: "";
      width: 7px;
      height: 7px;
      border-bottom: 4px solid #000;
      border-right: 4px solid #000;
      transform: rotate(45deg);
      position: absolute;
      right: 20px;
    }
    img {
      width: 35px;
      margin-right: 13px;
    }
    .flow-itemTtl {
      font-weight: 600;
      font-size: 1.5rem;
      letter-spacing: 0.1em;
    }
  }
  .flow-itemBottom {
    padding: 10px 13px 20px; // ここです。
    display: none;
    &:nth-child(1) {
      padding: 10px 13px 20px;
    }
    .flow-itemBold {
      font-weight: 600;
      font-size: 1.2rem;
      line-height: 1.6;
      letter-spacing: 0.1em;
    }
    .flow-itemTxt {

    }
  }
}

$(function () {
    // flow
    $('.flow-item').on('click', function(){
        $(this).find('.flow-itemBottom').stop().slideToggle(250);
    });
});

Answer 1

jQuery の slideToggle の仕様として、heightだけでなく上下パディング、上下マージンも変化させるようです。

ですので対策としては、padding-top は 0 にして別の方法で間隔を空けるか、slideToggle 以外の方法でスライドさせるか、になります。

前者なら、before疑似要素で間隔をあけるとか。

  .flow-itemBottom {
    padding: 0 13px 20px; // top を 0 に変更
    display: none;
    &:nth-child(1) {
      padding: 10px 13px 20px;
    }
/* 以下挿入 */
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 10px;
    }
/*ここまで*/

後者なら、animateメソッドを使うとか、CSSアニメーションでスライドを表現してjQueryでは.toggleClass()でクラスを付加/削除するだけにするとか、になると思います。

Comments

[yuta_bsn]

擬似要素の発想はなかったです！
良質なご回答ありがとうございました。