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

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

ただいまの
回答率

88.92%

slideToggleとpaddingについて

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 174

yuta_bsn

score 7

下のようなコードでは.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">出発前の1ヶ月前に事前課題を送ります。</p>
                                <p class="flow-itemTxt">0から始めるプログラミング事前学習講座、環境構築の事前学習、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);
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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()でクラスを付加/削除するだけにするとか、になると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/05 17:48

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

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る