Groups hidden on opening page, show on button click

I have a page under development in which I’ve created 8 groups. Each group needs to be hidden on opening the page but when a button is clicked the group needs to be displayed. I’ve created some HTML buttons as I can’t find a way to add an “onClick()” method to the Gutenberg buttons. I’ve also created some Javascript which opens and closes the groups as required. Unfortunately all the groups are on display when the page opens. Clicking any button closes them all first, then any button clicked works as expected. but the one needed. Is there a way I can hide the groups on Page Open? This all works fine in pure HTML/JS but Block Themes seem to add another layer of complexity.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer