To create a "FAQ-like" page in Webflow with multiple accordion menus that close when another is clicked, you can follow these steps:
1. Design your accordion structure:
- Create a section for your FAQ page and add a div block for each question and answer set.
- Inside each div block, add a heading element (e.g., h2 or h3) for the question and a div block for the answer.
- Set the initial state of the answer div block to be hidden.
2. Add interactions:
- Select the heading element of the first question and create a new interaction.
- Choose a trigger, such as a mouse click or tap, to open the accordion.
- Add a new step to this interaction and select the answer div block.
- Set the action to display the answer by choosing "Display: Block" or a similar option.
- Adjust the timing and animation settings to your preference.
- Create a new interaction for the same heading element to close the accordion.
- Choose a trigger, such as a mouse click or tap, to close the accordion.
- Add a new step to this interaction and select the answer div block.
- Set the action to hide the answer by choosing "Display: None" or a similar option.
- Adjust the timing and animation settings to your preference.
3. Apply interactions to other question and answer sets:
- Select the heading element of each subsequent question and create new interactions following the steps mentioned above.
- Make sure to set interactions for both opening and closing the accordion.
By setting interactions this way, when you click on one accordion to open it, the other accordions should automatically close.
Regarding the "family members" responsible, in this case, the parent element (div block containing the question and answer) is responsible for interacting with the child element (answer div block). The siblings, in this case, refer to the other question and answer sets within the same parent element.
Additionally, you can use the "Initial appearance" feature in Webflow's interactions panel to set the initial state of the answer div blocks to hidden globally. This ensures that all answer div blocks start in a closed state when the page loads.
I hope this helps you create your FAQ-like page with multiple accordion menus in Webflow! Let me know if you have any further questions.