My page has a list of DIV Blocks, each block has a expand/collapse button with an action to show/hide two blocks of text. One block of text is a summary 10-15 words, the second text block is several paragraphs. I have managed to figure out how to apply actions to click and show paragraphs while hiding summary.
Because I need several of these blocks of show/hide text on one page, after creating the first one I want to copy and paste the working behavior over and over. Hence lies the problem… the actions are tied to the original element, copy and paste does not make a unique action.
I originally tried to tie the Action to a Class but quickly realized clicking on the button of one block expanded all the blocks since they shared the same class name. So I changed the Action to be tied to a specific element, then copy and pasted the block. Now when any button is clicked it only fires the first show/hide block of text… in other words the copied block is unique but the button action did not follow the copy and paste to the new text blocks. Put another way, the click action on the copied blocks are broken, they did not copy with the rest of the block.
How is this done in WebFlow or do I have to edit after exporting my project?
You were on the right track with applying the action to a class. Once you have selected Class on the affect dropdown in the animation panel, a second input labeled Class will appear. Under that there will be a new dropdown that allows you to select whether it affects only children, siblings, or parents with that class. One of these should solve your problem depending on the structure of the div blocks. If you have any trouble applying this solution, please provide your read-only link so I can give you more specific instructions!
Thanks for the tip and I will go test your suggestion now. But I must say, this is not the way CSS is designed to work, sub-classing with each copy and paste should create a unique element and not have any effect on the class that is assigned to the element. And as far as I understand, the Element has a unique ID and based on the Dropdown in WebFlow “Selected Element” should point to the ID. But hay what do I know… thank and will report back shortly. Thanks again.
OK, took a while to test all of the four Class options… sibling, parent and child. Only All seems to work. Here is a read-only link if you have any suggestions. The area where the expand/collapse block exists in down near the bottom of this page under Testimonials. Thanks for taking a look and any help you can provide.
So it looks like the issue is that the class you need to target is the sibling of the parent of the trigger, which as far as I know, cannot be targeted using Affect: Class in Webflow animations. The easiest thing to do would probably be to just build the animation twice using Selected Element option. Other options would be trying to find a way to restructure your divs so that the element you are trying to affect is a direct parent, sibling, or child of the interaction trigger, or you can use jQuery to build the interaction.
Just in case you end up going the jQuery route, here’s a link to a jQuery Builder that I’ve found useful - https://wizardry-technique.webflow.io/jquery-writer. There is a tutorial link under it as well if you have any trouble.
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:
Thank you, this seems to work. Still have formatting to do but now I can copy the block and have the button only effect the current block. Interesting side note, when the Actions are all grouped the “Set as initial state” option is automatically appended to all actions that follow. Not sure why but I would call that a bug.
Again thank you for taking the time to document my problem, your answer so nicely.
I’m not sure if you’re noticing something other than the screenshot below, however this is intended as essentially you’re grouping all of those actions into the time slot prior to the main timeline:
Given you can’t really opt to stagger the timing of something that starts prior to interaction itself, you’ll notice that any actions that are set to “initial state” will snap to the top and group with any other “initial state” actions alongside the double-arrow icon.
Don’t hesitate to reach out if you run into any other roadblocks on the project!
