GenerateBlocks Toggle

toggle.css

.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger,
.site .gb-button-wrapper .gb-button.trigger {
  cursor: pointer;
  user-select: none;
  padding: 5px !important;
  border-radius: 2em;
  height: 25px;
  width: 50px;
  align-items: center;
  color: #ddd;
  background: #aaa;
}
.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger .gb-icon,
.site .gb-button-wrapper .gb-button.trigger .gb-icon {
    margin-left: 25px;
    margin-right: 0;
    transition: linear .15s all;
}

.editor-styles-wrapper .gb-button-wrapper .gb-button.trigger.toggled .gb-icon,
.site .gb-button-wrapper .gb-button.trigger.toggled .gb-icon {
    margin-right: 25px;
    margin-left: 0;
}

.site .gb-button-wrapper .gb-button.trigger:hover,
.site .gb-button-wrapper .gb-button.trigger:focus {
  color: #8ed1fc;
  background: var(--accent);
}

.site .containers {
  overflow: hidden;
}

.site .containers > .gb-inside-container > .gb-container {
  transform: scale(0); 
  height: 0;
  margin-bottom: 0;
  transition:  all ease .25s;
  overflow: hidden;
}

.site .containers > .gb-inside-container > .gb-container a {
  display: none;
}
.site .containers > .gb-inside-container > .gb-container.is-active a {
  display: unset;
}

.site .containers > .gb-inside-container > .gb-container.is-active {
  transform: scale(1);
}

toggle.js

window.addEventListener("DOMContentLoaded", (event) => {
  const tabSection = Array.from(document.querySelectorAll(".toggle")); // wrapper
  tabSection.forEach((section) => {
    let trigger = section.querySelector(".trigger");
    trigger.setAttribute("tabindex", 0);
    let contentWrapper = section.querySelector('.containers');

    let content = Array.from( contentWrapper.querySelectorAll(".gb-inside-container > .gb-container") );
    content[0].classList.add("is-active");
    content[0].style.height = content[0].scrollHeight + "px";
    
    function toggleEvents(event) {
      event.preventDefault();
      if (event.keyCode === 13 || event.button == 0 ) {
        trigger.classList.toggle("toggled");
        content.forEach((elem) => elem.classList.toggle("is-active"));
         content.forEach( (element) => {
          if ( element.classList.contains("is-active") ) {
            element.style.height = element.scrollHeight + "px";
          } else {
            element.style.height = 0;
          }
        });
      }
    }
      ["click", "keyup"].forEach((event) => trigger.addEventListener(event, toggleEvents));
  });
});

toggle.php

<?php
function thisbit_toggle_for_generateblocks() {
	global $post;
	$blocks = parse_blocks( $post->post_content );
	foreach( $blocks as $block ) {
		$block['attrs']['className'] = ""; // initiate className to fix error reporting index undefined
		if( $block['attrs']['className'] && $block['attrs']['className'] !== 'toggle' ) { return;
		} else {
			wp_enqueue_style( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/css/toggle.css', false, '0.0.1', 'all');
			wp_enqueue_script( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/js/toggle.js', '', '0.0.1', true );
			return;
		}
	}
}
add_action( 'wp_enqueue_scripts', 'thisbit_toggle_for_generateblocks', 9999 );


function thisbit_toggle_for_generateblocks_admin() {
	wp_enqueue_style( 'thisbit-toggle', get_stylesheet_directory_uri() . '/assets/css/toggle.css', false, '0.0.1', 'all');
}
add_action( 'enqueue_block_assets', 'thisbit_toggle_for_generateblocks_admin', 9999 );

Nice