Hey there! I’m wondering if someone could help me with the modification of the following interaction. So I essentially have an accordion, which header is wrapped in a div with rounded corners. However, when the accordion opens, it should, per design (I’m attaching a screenshot of how this should look) the header should kind of “merge” with the accordion content → and the bottom corners should be un-rounded.
Seems simple enough, but I can’t seem to figure out how to control rounding/un-rounding of the corners when the accordion closes/opens? Any help appreciated!! Thanks a lot in advance!..
Here is my public share link: Webflow - ARX Website
There may be a custom code option for this but Interactions doesn’t include corner radius natively. You can create something natively by using a div wrapper.
Place “product-headline” inside of a generic div that has the bottom corners without the curves.
Then, include an interaction instance on first-click that reveals the non-curved div and hides the curved div. The second click does the reverse.
Do this by changing the border colors using the green you have now and change it to transparent.
There are some little intricacies you’ll need to play around with to make the transition feel seamless with the timing. Also, the outer wrapper border will be one pixel larger but visually this can be smoothly changed.
1 Like
Ah, thanks soo much – this worked!!
I added a “-1” margin for my header, so that fixed the issue with the teeny overlap!
Thanks again for your advice! Appreciate it!)
Yay!
One last little thing you can do is widen the “product-headline” div slightly to 100.2% so that the right side lines up.
You are the best! Thanks verrrrry much!
