In this demonstration page, we’ve set up 3 submenus - each within their own layout block. Additionally, the top navigation bar is in its own layout block. The hero section of the website also has its own layout block. So, we have a total of 5 layout blocks on the page (excluding the one containing these instructions).
The sub menu blocks all share the same Group ID of ‘0’. and are all initially hidden. This is because these items rely on toggle visibility functions to display them - triggered by options in the main navigation. In this example, we don’t want users to see all the three sub menu choices at once - instead, we want them to select an option from the main navigation. When they select an option it will display a submenu under the main navigation at the top of the page, and any other layout blocks sharing the same ID will remain hidden from view. This happens on the other two menu choices also.
The Main navigation bar has a group ID of ‘1’, whilst the hero section has a group ID of ‘2’. Therefore, these layout blocks will be unaffected by the hiding or displaying of the submenu layout blocks.
In order to understand this, change the Group ID of the Hero section to ‘0’ and then preview in a browser. When the submenu choices are selected in the main navigation, the hero section gets hidden because it’s sharing the same ID as the submenu blocks. Change the ID back to 2, and the hero section remains in view on the page.