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, you’ll use the Webflow Interactions panel to create a simple toggle animation.

1. Prepare Your Elements

• Select the section/container you want to show or hide and make sure it has a clear class name.
• Optionally, set the section’s initial Display to None under the Style panel so it’s hidden on page load.

2. Create the Interaction

• Select the button that should trigger the action.
• Go to the Interactions panel (lightning bolt icon).
• Click + next to Element Trigger and choose Mouse Click (Tap).

3. Add “First Click” Animation

• Under On 1st Click, choose Start an Animation → + New Timed Animation.
• Name it (e.g., “Show Section”).
• Click + and select Element → choose the section/container.
• Add these actions:
• Set Display to Block or Flex, depending on layout.
• Add Opacity from 0% to 100% (optional smooth fade).
• Optionally, adjust Duration (e.g., 0.3s).

4. Add “Second Click” Animation

• Under On 2nd Click, choose Start an Animation → + New Timed Animation.
• Name it (e.g., “Hide Section”).
• Add these actions:
• Adjust Opacity from 100% to 0%.
• Add a Wait Time (matching the fade duration).
• Set Display to None after fade completes.

5. Test the Toggle Functionality

• Preview the interaction using Webflow Preview Mode (Eye icon).
• The section should toggle visibility each time the button is clicked.

Summary

Use Webflow's Interactions panel to link a button click to show/hide a section using a combination of Display and Opacity actions. This creates a smooth toggle animation that enhances user experience without any code.