Alle die Variablen, die Du eingangs mit getElementById ermittelst, ändern sich im weiteren Verlauf nicht mehr und sollten als const definiert werden.
Das Verfahren mit classList.toggle ist schon Mal gut.
Besser nicht für jeden Unterpunkt eine eigene ID und Funktion definieren, sondern allen die selbe Klasse zuweisen, eine Nodelist mit querySelectorAll ermitteln, diese in einer Schleife abarbeiten und jeweils den Eventhandler zuweisen. Dazu musst Du im DOM navigieren und brauchst Nachbarselektoren:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator
Auf die Weise brauchst Du nur noch das HTML zu ändern, wenn eine weitere Frage hinzu kommt.
Zitat
wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind
Das kommt durch das classList.toggle zu Stande, verwende statt dessen classList.add.
Zitat
kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird
Lösung a): Im HTML zwei Buttons anlegen und den, der gerade nicht sichtbar ist, mit display:none; unsichtbar machen. Auch dazu kannst Du die Klasse "d-none" verwenden.
Lösung b): Die Buttons nicht im HTML anlegen, sondern in einem Pseudoelement ::after. Auch das hat den Vorteil, dass Du nicht jedes Mal den Button berücksichtigen musst, wenn Du einen neue Frage hinzu fügst.
