Hello, I created an interaction that shows & hides a staff member’s bio. The final page will contain around 30 bios, so I tried to reuse the interaction for staff member one on staff members two and three, and so on. When I click on “show/hide bio” for staff members two & three, it shows/hides the bio for staff member one. I can see in the in “Actions” panel associated with the interaction that the “show/hide” functionality for staff members two & three is referencing text and paragraph elements that belong to staff member one.
When I click on a specific action and go to “Affect” at the bottom of the page, I can see there are options to change the element that is affected by a specific action, but this is where I get lost. When I make changes, the “show/hide” functionality gets all weird.
Is there a easy way to reuse an interaction with just a few small changes, or do I have rebuild the interaction for each staff member? Public share link of the issue is below.
Finally worked it out with a bit of help.
In the interactions set to class as you have done.
Then there is a pull down option that says
“Only siblings with this class”
So what it is saying only change things below the triggered element.
If that works, tick you love me, tick solved and if you got lots of spare shmoney consider a donation.
Hello Alex, the article did indeed help, thanks for that.
For those with a similar issue, I’ll list the solution so there is a record of it in the forum.
As I explained, clicking on the bio for staff member one also triggered the bios for staff members two and three to open. The same happened with closing one bio: it would trigger all bios to close. The aim was to click on any person’s bio, and just have that particular bio open, and then of course be able to close it without it triggering any other bios.
The solution was to:
Add the paragraph that contained the staff member’s bio to the div block that contained the trigger. The “show bio” and “hide bio” were initially the only two items in the div block that I applied the animation to, and the paragraph with bio text was sitting outside this div block. The first screenshot below reflects the navigator view after I put the paragraph text inside the div block. The second screenshot reflects what it looks like in the page itself.
In the interaction panel, change the affected class to “Only children with this class”. Since the paragraph text is now inside the div block I gave the class “Show Hide Div”, taking these two steps solved my issue.
Hello, I just wanted to acknowledge that you did help guide me towards the solution. Specifically, your remark “only change things below the triggered element”. That, in combination with the article Alex suggested, helped me solve the issue. So thanks, much appreciated!
