How can I make the first service always open in Webflow, and manually close it when I open the second service?
TL;DR
- Set the first service content to show on page load using a Page Load interaction, while hiding all others.
- Create click interactions for each service trigger to hide all service blocks and show the selected one; optionally use toggle interactions to allow manual closing.
To make the first service section open by default and manually close it when another service is opened, you’ll need to create a custom interaction in Webflow using click triggers and element states.
1. Setup Your Service Sections
- Add your service items in a uniform structure, like Service 1, Service 2, etc.
- Each should have:
- A clickable trigger element (e.g., a heading or button).
- A corresponding service content block (e.g., a div with details).
2. Set Initial States in Webflow
- Select the first service's content block.
- In the Interactions panel, create a Page Load interaction.
- Set it to Show (i.e., height auto, opacity 100%, display block).
- For all other services, set initial states to:
- Opacity: 0
- Height: 0px (or scale to 0, or set to Display: None)
- Display: None (if using display toggling)
3. Create Click Interactions
- Click on the trigger for Service 1.
- Create a Click (Mouse Click) interaction.
- When clicked, set it to:
- Hide all other service blocks (set those to Display: None or height 0, opacity 0).
- Show the Service 1 content (Display: Block, height auto, opacity 100%).
- Repeat the process for Service 2 and others:
- Each click hides others and shows the clicked one.
- This mimics a manual accordion system.
4. Optional: Add Toggle Ability
- If you want to close a service by clicking it again, add a toggle interaction:
- Use a "When 1st Click" and "When 2nd Click".
- 1st Click: Show current, hide others.
- 2nd Click: Hide current.
5. Use Interaction Targeting Wisely
- Wrap each service block inside a wrapper div for isolation.
- Use the “Affect only elements inside this class” setting for cleaner targeting.
Summary
To keep the first service open by default and allow manual switching, use Page Load interactions to open the first service, then build click interactions per service trigger to hide others and reveal the selected one. Use toggles for manual collapsing if needed.
