Я понимаю, что этот вопрос был задан, и я работаю с образцом кода того, кто задал похожий вопрос ( Bootstrap гармошка, прокрутите вверх к активной (открытой) гармошке при нажатии? ), но я не могу заставить его работать в моем коде.
Когда пользователь мобильного устройства нажимает на кнопку, чтобы просмотреть больше, контент открывается под экраном. Пользователь не знал бы, что это там.
Когда пользователь нажимает кнопку для просмотра содержимого, я хочу, чтобы содержимое автоматически прокручивалось.
Вот мой код:
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 <a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>, <a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and <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 <a href="http://www.reggiesweetjohnson.com/"
target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
<!--end yourInstructor area -->
</div>
<!-- end expandInfo -->
Любая помощь будет принята с благодарностью !!
Спасибо
Тим