How can I make the first service always open in Webflow, and manually close it when I open the second service?

To make the first service section open by default and have it manually close when the second service is opened, you'll need to use Webflow interactions to create a toggle effect with conditions.

1. Set Up Initial Element States

• Select the First Service Section and open the Interactions panel.
• Choose Page Load (or when the parent element is scrolled into view, depending on your needs).
• Set an initial state for the first service: Make it Visible (e.g., display: block, height: auto, rotate icon if needed).
• For the other services like the second one, set initial state to Hidden (e.g., display: none or height: 0).

2. Create the Toggle Interaction on Service Buttons

• Select the First Service Button/Link and create a new Mouse Click (Tap) interaction.
• Under Action 1, have it Show or Expand the first service content.
• Under Action 2, Hide or Collapse the second service content.

Repeat this process for the second service button:

• On click of Second Service Button, have it Show the second service and Hide the first service.

3. Manage Exclusive Visibility

To make sure only one service is open at a time:

• Add a Hide animation step for the other service in each button interaction.
• Use conditional visibility or display animations so when you open one, it actively closes the other.

4. Optional: Indicators or Icons

• If you’re using icons or arrows to indicate open/close states, include them in the same interactions.
• Use Rotate or Change Opacity animations to update their appearance.

Summary

Use Webflow interactions to set the first service open by default, and apply toggle animations so that clicking another service closes the currently open one. Make sure interactions include both open and close steps for each service pane to manage visibility dynamically.