In prototype - can expanding one element collapse other elements?

Ask the community
1

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 :nerd_face:

2 Likes
2

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)

4 Likes
3

Thank you so much! I’ll try everything :metal:

1 Like
4

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)…

1 Like
5

Hmm. Looks like it, yeah. :-/

It seems the only way to have a “targeted” override is to have 12 Variables. (or 12 modes, but Figma only gives you 4). That’s a lot of “Code”… At least you can copy paste interactions.

I tried having the Interaction on the Accordions be “On Click change to State - Open”, hoping that that would skip the variable, but I encountered the same behavior as you did. I suspect that behind the scenes Figma is using the variable for the “change” action.

I also tried to see if I could change the mode of the instance, but Set Variable Mode applies to the Page only.

For now I’m stumped.

6

I managed to sort of get there.

In the Accordion Component:

  • 2 variants: State: Closed and State: Open.
  • In each variant a button with “on Click: change to [The other variant]” to open and close each single FAQ.

Set up all the variables:
Variables:
FAQState 01: Closed
FAQState 02: Closed
…
FAQState 12: Closed

And applied each of the FAQ states to each of the 12 instances. :-/

On the “Open All” button instance:

  • Set FAQState 01 to Open
  • Set FAQState 02 to Open
  • …
  • Set FAQState 12 to Open

Copied those Interactions to the “Close All” button and changed all the “Open” to “Closed”.

7

Hi guys, first of all thanks so much for the very valuable questions and answers. I know it is a bit to ask, but is there a video tutorial you a aware of explaining this on an FAQ or Accordion?
tbh i am stuck in my accordion :face_with_diagonal_mouth: thanks anyways i’ll keep trying :+1: