My attempts to use `this.scrollIntoView({behavior: "smooth"}) were yielding inconsistent results in terms of where the selected item would land on the page. I believe I might need to utilize scrollTop(), but as someone who is new to jQuery, I am feeling a bit overwhelmed by the various potential solutions.
If you would like to view a working example, please see the following Codepen link: https://codepen.io/boingloings33/pen/JjwWQpE
Thank you for any assistance you can provide.
Script.js
jQuery(function () {
$(".head").on("click", function () {
let isActive = $(this).hasClass("active");
$(".head").removeClass("active");
$(".head").parent().find(".content").slideUp(280);
$(".head").parent().find(".arrow").removeClass("arrow-animate");
if (isActive === false) {
$(this).addClass("active");
$(this).parent().find(".arrow").addClass("arrow-animate");
$(this).parent().find(".content").slideDown(280);
}
});
});
index.html
<div class="container">
<div class="accordion" id="accordion-1">
<div class="head">
<h2>Number 1</h2>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... (content continues)
</p>
</div>
</div>
<br />
(additional accordion items omitted for brevity)
</div>
styles.css
body {
font-family: Lato;
background: rgb(142, 215, 213);
overflow-y: scroll;
}
(CSS styles continue...)