I have a page with 3 text sections that can expand to show more text. Each section has an expand icon.
I’ve set the components variants so that clicking the icon toggles between the open / closed state of each section, so I have a prototype with 3 sections that the user can expand / collapse separately.
Is there a way to create a prototype interaction where clicking the icon on a specific section not only expands that section, but also collapses all other open sections?
Thank you in advance 
I can think of 3 ways of doing this:
1
Make a Component with variants for all states and prototype the interactions in the component.
So:
Variant 1: All closed
Variant 2: First section open, the rest closed
Variant 3: Second section open, the rest closed
Varant 4: Third section open, the rest closed
2
Use variables
Each of the sections will have to have two variant states (For example “Closed” and “Open”)
Attach a String variable (Like “Section 1 State”, “Section 2 state”) and then attach a Set Variable action to your buttons that set the variable of the section you want to “Open” and the rest to “Closed”.
3
A combo of both, which may be handy if you call that page from different places and want to open the right text section (For example a FAQ page that opens to a particular text while still giving access to the other sections):
Use a String variable like “Open Section” and use it to change the component state to the one you want/need (For example OnClick: Set “Open Section” to “Section 1”) and then open the page with that section open".
I personally prefer the first method because it’s pretty foolproof and using the third if really needed.
For the second method, the way Figma has set up Variables means you need to put all the logic in the trigger, so you’ll end up “writing” a lot of code. (Every button will have to have a variation of Set “Section 1” to “Open”, Set “Section 2” to “Closed”, Set “Section 3” to “Closed”, so there’s more room for errors). The advantage is that it’s more flexible, for example, you can choose to have two sections open if needed.
EDIT 27/11/2023:
4th option: Use a variable to indicate which Section you want open and then have a bunch of Conditionals that operate the logic:
What i’d do: Have a component for the button with the following actions so that you don’t have to rewrite everything all the time:
On Click
If OpenSection == 1
Set Variable Section1 to "Open"
Else
Set Variable Section1 to "Closed"
If OpenSection == 2
Set Variable Section2 to "Open"
Else
Set Variable Section2 to "Closed"
If OpenSection == 3
Set Variable Section3 to "Open"
Else
Set Variable Section3 to "Closed"
and then add to each instance the following:
On Click
Set Variable: OpenSection to 3
(At the top of the stack, because the order is important)
Thank you so much! I’ll try everything 
Thanks for your answer here. So, I have a similar challenge. I have an FAQ section with the usual expand/collapse behavior for each question. Now, I’d like to add a button to “Expand all” the question blocks (which also turns into “Collapse all” button when clicked).
I’ve attached a local boolean variable called ‘FAQisExpanded’ (default is False) to the instances of the FAQ blocks, and then added an interaction to the Expand all button to set the variable to True. I then added the appropriate behavior for the Collapse all button.
The behavior works for the Expand/Collapse all, but now when I click on individual FAQ blocks to expand/collapse them individually, they affect all the blocks.
Please don’t tell me I have to create a variable for every question in the FAQ because that seems a bit silly (I have 12 FAQ questions)…