Bootstrap 4 Accordian scroll to open content?

久未见 提交于 2019-11-29 17:16:53

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!