Hide / unhide components on the site

A common use-case is to create toggle functions (buttons) that hide or unhide parts of the website. This is e.g. common in mobile menus, where the hamburger menu opens the menu or in a FAQ component where clicking on a question opens the answer.

In this video we will look at how you can toggle things. First we add the "toggle open" action to the button component on the screen. This will call a section specific "toggle open"-action that any component in the section can listen to.

Then we can add an open-state variant to anything we want to. In this case we make the main layout of a container's "display" as "hidden" and then add an open-state variant where it's "display" is "flexbox".

And then we're done.