Hello all! I am building a website for the first time with kirby and so far so good. I have a list of projects that work as an accordion so when someone clicks on a panel, it expands and shows the project’s content. When the user clicks on a panel, not only the panel should be opened, but it should scroll to the activated panel. I managed to achieve this for the first panel but when I click on any other project the accordion only scrolls to the top of the first panel. Is there something I am missing? appreciate any help!
Here’s my code:
<section class="projects">
<?php foreach($data->children()->listed() as $project): ?>
<div class="project">
<figure>
<?= $project->image() ?>
</figure>
<div class="project-intro">
<p class="title">
<?= $project->title() ?>
</p>
<p class="description">
<?= $project->description() ?>
</p>
</div>
<button type="button" class="accordion__btn">
<p class="show-btn">Show More</p>
</button>
<div class="accordion__content">
<?= $project->cover() ?>
<?= $project->text() ?>
<?= $project->image() ?>
</div>
</div>
<?php endforeach ?>
document.querySelectorAll('.accordion__btn').forEach(button=> {
button.addEventListener('click', () => {
const accordionContent = button.nextElementSibling;
button.classList.toggle('accordion__btn--active');
if (button.classList.contains('accordion__btn--active')) {
accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
button.scrollIntoView({behavior: "smooth"});
} else {
accordionContent.style.maxHeight = 0;
}
})
});