i need help to know is it possible to have accordion placed inside of a 'div element' that has fixed height and able to scroll to top when each accordion is opened. I don't use any libraries such as Bootstrap or so, it's plain SCSS and vanilla JS. You can see in the image that container has fixed width. I was able to do when there are 4 elements, but when there are more than height of parent, it doesn't work properly.
SS of section
var acc = document.getElementsByClassName("c-lesson__title");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.style.marginBottom = "0rem";
} else {
var active = document.querySelectorAll(".b-course__lesson .c-lesson__title.active");
for (var j = 0; j < active.length; j++) {
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
active[j].nextElementSibling.style.marginBottom = "0rem";
}
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.marginBottom = "6rem";
}
this.classList.toggle("active");
var $block = $(this).closest('.b-course__lesson');
var position = $block.position();
$('.b-course__lessons').animate({
scrollTop: position.top
}, 500);
});
}
<div class="b-course__lessons">
<div class="b-course__lesson">
<h3 class="c-lesson__title">
1. Lorem ipsum answer goes here dolor sit amet
<span class="c-lesson__icon">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 2L8.5 8.68889L16 2" stroke="#515B7B" stroke-width="3"></path></svg>
</span>
</h3>
<div class="c-lesson__panel">
<p class="c-paragraph c-paragraph-size--primary c-paragraph-color--secondary">Lorem ipsum answer goes here dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="b-course__lesson">
<h3 class="c-lesson__title">
2. Lorem ipsum answer goes here dolor sit amet
<span class="c-lesson__icon">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 2L8.5 8.68889L16 2" stroke="#515B7B" stroke-width="3"></path></svg>
</span>
</h3>
<div class="c-lesson__panel">
<p class="c-paragraph c-paragraph-size--primary c-paragraph-color--secondary">Lorem ipsum answer goes here dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="b-course__lesson">
<h3 class="c-lesson__title active">
3. Lorem ipsum answer goes here dolor sit amet
<span class="c-lesson__icon">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 2L8.5 8.68889L16 2" stroke="#515B7B" stroke-width="3"></path></svg>
</span>
</h3>
<div class="c-lesson__panel" style="max-height: 196px; margin-bottom: 6rem;">
<p class="c-paragraph c-paragraph-size--primary c-paragraph-color--secondary">Lorem ipsum answer goes here dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. .</p>
</div>
</div>
<div class="b-course__lesson">
<h3 class="c-lesson__title">
4. Lorem ipsum answer goes here dolor sit amet
<span class="c-lesson__icon">
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 2L8.5 8.68889L16 2" stroke="#515B7B" stroke-width="3"></path></svg>
</span>
</h3>
<div class="c-lesson__panel">
<p class="c-paragraph c-paragraph-size--primary c-paragraph-color--secondary">Lorem ipsum answer goes here dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
