Sorry to hear it’s not working as you’d expect, but thankfully it definitely is possible! I’ve gone ahead and outlined the adjustments below, but don’t hesitate to let me know if anything needs more clarification.
- Firstly, make sure you change the interaction to affect the class rather than the element. This will ensure that you don’t need to manually add the interaction each time you want the affect—all you’ll need is the correct class names and structure:
- Next you’ll need to adjust all of the elements the trigger affects (excluding the grow/shrink icons) so that they sit on the same level within the navigator. Keep in mind this will require some tweaks to your element styles:
- Adjust the trigger options on the grow/shrink icons for both the open and close interactions so they’re only affected if they are children of the trigger element:
- Adjust the trigger options on the two text block elements (snipitText and expandedBlock) for both the open and close interactions so they’re only affected if they are siblings of the trigger element:
- As a slight adjustment (although not necessary) I’d probably recommend modifying the interaction so all changes happen at the same time—this prevents any delay between an element hiding and another showing. To do this, just drag each element on the interaction timeline on top of one another—just make sure you keep the two “initial state” interactions on the expandAction interaction separate:
That’s it! Now that you’ve got everything setup, you can either copy/paste the testimonial block or simply recreate the structure and classes and it will affect only the instance of element you’re interacting with:
