Adding text link in expanded toggle/accordion copy

I’m designing and prototyping a website that uses an accordion/toggle on almost every page. I’m trying to add a simple text link to another page (standard HTML hyperlink to a word or phrase) in the revealed/expanded copy, but I can’t seem to make it work for the prototype.

Am I doing something wrong, or is this not possible?

Linking to a frame on another page is not possible (at least, not in a way that keeps you in the prototype). All frames in a prototype need to be on the same page.

If you can move your pages in the same page, then you can use a transparent frame more like a hotspot over the word here instead of using the HTML link (which is more for external web pages vs. internal Figma page frames).

Sorry, I should’ve been more clear – I’m only trying to link to another page, not frame.

I think the main issue I’m having is nesting interactivity. I can’t seem to figure out how to add a link or hotspot over selected words due to the fact that the whole text paragraph is a frame that already has a toggle on/off interaction applied.

Any further thoughts would be greatly appreciated.

Quick question: For the text frames, are those in an Auto Layout frame? If not, I would think simply putting transparent boxes over those words would do the trick, since they would be effectively buttons on top of the toggle interaction.

Option B would be to not apply the toggle to the whole paragraph but instead just to the + and - icons in the top right of each section.

Yes, they do have Auto Layout applied because the accordion/toggle section is part of a larger page and the prototype needs to be fully functional. I suppose that would be why I’m not able to put a transparent box over anything and there’s no way around that.

Option B might be a valuable solution though!! Will give it a go and report back, thanks so much.

1 Like

Option B was a success!! Just what I needed to achieve. Thanks heaps for your help.

1 Like