Bootstrap 4 Accordian scroll to open content?

2020-02-15 05:32发布

站内问答 / jQuery
1187 1 2

I understand this question has been asked and I'm working with sample code of someone who asked a similar question (Bootstrap accordion, scroll to top of active (open) accordion on click?), but am unable to get it to work in my code.

When a mobile user clicks on a button to view more, the content opens up below the screen. The user would have no idea it's there.

When a user clicks the button to view the content, I would like the content to be scrolled to automatically.

Here is my code: https://jsfiddle.net/bigtime/6yung8vk/2/

JQUERY:

$('.panel-collapse').on('shown.bs.collapse', function(e) {
      var $panel = $(this).closest('.panel');
      $('html,body').animate({
        scrollTop: $panel.offset().top
      }, 500);
    });

HTML:

<!--  Yellow Section   -->
<div class="accordion" id="expandInfo">
  <section id="yello" class="py-5">
    <div class="container">
      <div class="row ">
        <!--start featured video -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-file-video fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Featured Video</h3>
          <p>Women's Self-Defense</p>
          <button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
        </div>
        <!--end featured video -->
        <!-- start train -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa far fa-handshake fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Train With Us</h3>
          <p>Why You Should</p>
          <button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
        </div>
        <!--end train-->

        <!--start instruct -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fas fa-users fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Your Instructor</h3>
          <p>Get To Know Us</p>

          <button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
        </div>
        <!--end instruct-->
      </div>
    </div>
  </section>

  <!-- Collapsible Element HTML -->
  <!--start viewVideo  area -->

  <div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-7">
      <div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
      </div>
    </div>
    <div class="col-md-5">
      <h4>Women's Self-Defense Course</h4>
      <p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
        presented in the video you can improve your chances of surviving an attack.</p>

      <p>Click the play button to see a short clip of the class.</p>
      <div style="text-align:center">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick" />
          <input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
          <input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
        </form>
      </div>
    </div>
  </div>
  <!--end viewVideo  area -->
  <!--start whyUs  area -->

  <div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-5">
      <div class="embed-responsive">
        <img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
      </div>

    </div>
    <div class="col-md-7">
      <h4>Why you sould choose us...</h4>
      <p>Sharing knowledge and helping others reach their full potential is what we do best.
      </p>
      <p>
        The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
        defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
      </p>
    </div>
  </div>
  <!--end viewVideo  area -->

  <!--start yourInstructor  area -->

  <div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-4">

      <div class="embed-responsive">
        <img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
      </div>
    </div>
    <div class="col-md-8">
      <h4>Tim Mousel</h4>
      <p>Tim Mousel is the owner of&nbsp;<a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>,&nbsp;<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and&nbsp;<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
      <p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting  Championship</strong> (UFC), <strong>King of the Cage</strong>,
        <strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing.  Tim was also the Strength and Conditioning Coach for two-time world boxing champion&nbsp;<a href="http://www.reggiesweetjohnson.com/"
          target="_blank">Reggie Johnson</a>.
      </p>
    </div>
  </div>
  <!--end yourInstructor  area -->
</div>
<!-- end expandInfo -->

Any assistance would be greatly appreciated!!

Thanks,

Tim

1条回答
淡お忘
2楼-- · 2020-02-15 05:58

Please have a look at below snippet

$('.panel-collapse').on('shown.bs.collapse', function(e) {
  var $panel = $(this).attr("id")
  console.log($panel)
  $('html, body').animate({
    scrollTop: $('#' + $panel).offset().top
  }, 500);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="accordion container-fluid" id="expandInfo">
    <section id="yello" class="py-5">
      <div class="container">
        <div class="row ">
          <!--start featured video -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa fa-file-video fa-stack-1x aria-hidden=" true></i>
            </span>
            <h3 class="iconyell">Featured Video</h3>
            <p>Women's Self-Defense</p>
            <button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
          </div>
          <!--end featured video -->
          <!-- start train -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa far fa-handshake fa-stack-1x aria-hidden=" true""></i>
            </span>
            <h3 class="iconyell">Train With Us</h3>
            <p>Why You Should</p>
            <button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
          </div>
          <!--end train-->

          <!--start instruct -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa fas fa-users fa-stack-1x aria-hidden=" true""></i>
            </span>
            <h3 class="iconyell">Your Instructor</h3>
            <p>Get To Know Us</p>

            <button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
          </div>
          <!--end instruct-->
        </div>
      </div>
    </section>

    <!-- Collapsible Element HTML -->
    <!--start viewVideo  area -->

    <div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-7">
        <div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
          <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
        </div>
      </div>
      <div class="col-md-5">
        <h4>Women's Self-Defense Course</h4>
        <p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
          presented in the video you can improve your chances of surviving an attack.</p>

        <p>Click the play button to see a short clip of the class.</p>
        <div style="text-align:center">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
            <input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
          </form>
        </div>
      </div>
    </div>
    <!--end viewVideo  area -->
    <!--start whyUs  area -->

    <div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-5">
        <div class="embed-responsive">
          <img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
        </div>

      </div>
      <div class="col-md-7">
        <h4>Why you sould choose us...</h4>
        <p>Sharing knowledge and helping others reach their full potential is what we do best.
        </p>
        <p>
          The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
          defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
        </p>
      </div>
    </div>
    <!--end viewVideo  area -->

    <!--start yourInstructor  area -->

    <div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-4">

        <div class="embed-responsive">
          <img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
        </div>
      </div>
      <div class="col-md-8">
        <h4>Tim Mousel</h4>
        <p>Tim Mousel is the owner of&nbsp;<a href="http://www.defend.net/">Mousel's Mixed Martial Arts
            Academy</a>,&nbsp;<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and&nbsp;<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
        <p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting Championship</strong> (UFC), <strong>King of the Cage</strong>,
          <strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion&nbsp;<a href="http://www.reggiesweetjohnson.com/"
            target="_blank">Reggie Johnson</a>.
        </p>
      </div>
    </div>
    <!--end yourInstructor  area -->
  </div>
  <!-- end expandInfo -->

</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)