Кнопка «показать больше/показать меньше» приводит к перескакиванию страницы при нажатии ⇐ CSS

[Anonymous]

На моем веб-сайте есть раздел отзывов, аналогичный разделу на официальном веб-сайте Tailwind CSS.
В разделе отзывов у меня есть кнопка, которую вы можете нажать, чтобы показать больше или показывать меньше отзывов.
Функция «Показать больше» работает нормально, но когда я снова нажимаю кнопку, чтобы показывать меньше отзывов, страница сильно перемещается.
Я не знаю, как остановить перемещение страницы, если указано «показать меньше». случается.
Чтобы воспроизвести ошибку

• посетите https://lagoswashing.netlify.app/
• прокрутите вниз до раздела отзывов под названием «Отзывы Google и Facebook».
• нажмите «показать больше...»
• прокрутите вниз, пока не увидите кнопку снова.
• нажмите кнопку еще раз с текстом «окей, я понял» (отзывов будет меньше)
• страница переместится

На https://tailwindcss.com есть рабочее решение на их сайте (это второй раздел), но я так и не смог понять, как они предотвращают переход страницы при сворачивании отзывов.
Вот минимальный код пример

Код: Выделить всё

    const toggleButton = document.getElementById("toggle-button")

const grid = document.getElementById("grid")

let isCollapsed = false

toggleButton.addEventListener("click", () => {
isCollapsed = !isCollapsed

if (isCollapsed) {
grid.classList.add("collapsed")
} else {
grid.classList.remove("collapsed")
}
})

Код: Выделить всё

    body {
padding: 72px;
}

.filler-content {
background: seashell;
width: 100%;
height: 1600px;
}

#grid {
background: black;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

.grid-item {
background: lightblue;
padding: 80px;
}

#toggle-button {
background: orange;
padding: 16px;
position: fixed;
bottom: 4px;
}

.collapsed {
max-height: 20rem;
overflow: hidden;
}

Код: Выделить всё

    this is filler content... scroll down


scroll down more until you see next message

review1
review2
review3
review4
review5
review6
review7
review8
review9
review10
review11
review12
review13
review14
review15
review16
review17


Show less/Show more reviews


this is filler content.. click the orange button when it is below this sentence

Подробнее здесь: https://stackoverflow.com/questions/793 ... en-clicked