How can I hide or show a section/container with a button click in Webflow?
TL;DR
- Set the section's initial display (e.g., Display: None) and assign it a class.
- Add a button, then create a click interaction using the Interactions panel.
- Use Display and Opacity actions to animate show/hide behavior on first and second clicks.
- Publish and test the site to ensure the toggle functionality works as expected.
To hide or show a section or container in Webflow using a button click, you’ll need to use Webflow’s Interactions panel. Here’s how you can do it step-by-step.
1. Prepare the Elements
- Select your container or section that you want to show or hide.
- In the Style panel, set its initial status. If you want it hidden to start:
- Set Display: None under Layout.
- Give it a class name (e.g., "HiddenSection").
2. Add a Toggle Button
- Drag in a Button element.
- Assign it a unique class name (e.g., "ToggleButton").
3. Create an Interaction for the Button
- Click your button, go to the Interactions panel (lightning icon).
- Click + next to Element Trigger, choose Mouse Click (Tap).
- Choose Start an Animation > New Timed Animation.
- Name it (e.g., "Show/Hide Section").
4. Add Show/Hide Actions
- Click + Add Action, select Display > None for the element you want to hide.
- Then click the gear and change it to Display: Block if you're revealing it.
To make a toggle that shows or hides, do this instead:
- In the button's click interaction, choose Action: Toggle with Display set to either Block/Flex/Grid or None, depending on visibility.
Or to make it clearer:
Step 1 (Show):
Add an action for the hidden section.
First set Display: Block/Flex/Grid.
Then add an Opacity from 0% to 100% (optional for a fade-in effect).
Step 2 (Hide):
Add a second click animation (Click – 2nd Click).
Add actions to set Opacity to 0%, then Display: None.
5. Publish and Test
- Publish your site to test the interaction.
- Clicking the button should now toggle the visibility of your section/container.
Summary
To toggle visibility of a section with a button click in Webflow:
- Set the initial Display setting of the section.
- Create a Click interaction on the button using the Interactions panel.
- Use Display and Opacity actions to show or hide elements with or without animation.
- Test and adjust as needed to get the desired toggle behavior.