Die Schaltfläche „Mehr anzeigen/Weniger anzeigen“ bewirkt, dass die Seite beim Klicken springt ⇐ CSS

[Guest]

Auf meiner Website habe ich einen Bewertungsbereich, der dem auf der offiziellen Tailwind CSS-Website ähnelt.
In meinem Bewertungsbereich habe ich eine Schaltfläche, die Sie drücken können, um mehr oder mehr anzuzeigen Weniger Bewertungen anzeigen.
Die Funktion „Mehr anzeigen“ funktioniert einwandfrei, aber wenn ich die Taste erneut drücke, um weniger Bewertungen anzuzeigen, bewegt sich die Seite stark.
Ich bin mir nicht sicher, wie ich verhindern kann, dass sich die Seite verschiebt, wenn der Teil „Weniger anzeigen“ angezeigt wird passiert.
Um den Fehler zu reproduzieren

• besuchen Sie https://neon-lokum-e0b167.netlify.app/< /li>
  Scrollen Sie nach unten zum Abschnitt „Bewertungen“ mit dem Titel „Google- und Facebook-Bewertungen“
• klicken Sie auf „Mehr anzeigen …“
• Scrollen Sie nach unten, bis Sie die Schaltfläche erneut sehen.
• Klicken Sie erneut auf die Schaltfläche und geben Sie den Text „Okay“ ein Ich verstehe, worum es geht“ (hier werden weniger Bewertungen angezeigt)
• Die Seite wird verschoben

https:// tailwindcss.com hat eine funktionierende Lösung auf seiner Website (es ist der zweite Abschnitt), aber ich konnte nicht herausfinden, wie sie verhindern, dass die Seite springt, wenn die Bewertungen ausgeblendet sind.
Hier ist ein minimales Codebeispiel

Code: Select all

    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")
}
})

Code: Select all

    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;
}

Code: Select all

    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