How can I hide or show a section/container with a button click in Webflow?

To hide or show a section or container with a button click in Webflow, use Webflow's built-in interactions system to toggle the element's visibility.

​

1. Prepare the Elements  

• Create your section or container in the Designer.
• Give it a unique class or ID if it doesn't already have one.
• Ensure this section's initial state is set to display: none or opacity: 0 if you want it hidden on page load.
• Add a button element (e.g., a div, button block, or link block) that users will click to trigger the action.

​

2. Set Initial State Using Interactions  

• Select the section/container you want to show/hide.
• Go to the Interactions panel (lightning bolt icon).
• Click + Element Trigger → choose Page Load.
• Select Start an animation → click + New Timed Animation.
• Create a new animation and add an action setting the section's opacity to 0 and/or display to none.
• Click "Set as initial state" for this action.
• Save and close the animation.

​

3. Create Toggle Interaction on the Button  

• Select the button you created.
• In the Interactions panel, click + Element Trigger → choose Mouse Click (Tap).
• Choose "On 1st Click":  
• Select Start an Animation → click + New Timed Animation.
• Add actions:
  • Change Display to Flex or Block (depending on your layout).
  • Set Opacity to 100%.
  • Optional: Animate the opacity from 0% to 100%.
• Then under "On 2nd Click", add another animation:
• Animate Opacity to 0%, then
• Change Display to None after the fade-out is complete.

​

4. Test and Adjust  

• Preview your site to test the interaction.
• Adjust timing, easing, or play speed to improve appearance.

​

Summary  

To show/hide a section with a button in Webflow, use Mouse Click (Tap) interactions to toggle an element’s display and opacity properties. Set the section to be hidden on page load, then create animations for both the “1st click” (show) and “2nd click” (hide) actions.