Hi all,
I’ve created the following site arnoldstudio.net and have an issue with text loading within accordion drop downs. On the project pages, rather than the text appearing in a static manner, each character wraps on the line when opened and shifts when closing the accordion. The text is growing and filling the available space, then vanishes on close.
Any ideas on how I could fix this would be great!
Any help would be appreciated.
Appears to be on the “close” click trigger. You’ll need to add “100%” width on the “.accordion-item-content” div.
Thanks for your help! Ive tried this but doesn’t work. When opening the accordions the text width increases. Only when I add a fixed px value does the text remain static. Which isn’t ideal
Ok, I think I’ve figured it out.
On your close action, start the animation from where the “open” action ends. So .accordion-item-content will begin with height = auto and the icon will be rotated 180. Be sure to set duration at 0sec. for both elements.
Then tell the elements to return to height = 0 and rotation = 0. You can set the duration and easing.
Thanks for your time looking. Your SC is actually referring to the open state, not closing. The .accordion-item-content needs to be set auto here in order to take the height from the child elements.
The issue is with the width - as the characters are moving across the container once the dropdown is clicked. It’s better to click the trigger on the left hand text to see this. If you have anymore ideas id be happy to hear them. Cheers
Hi Seb_Andreas,
My previous screen grab shows what I changed in your close action to make it work correctly. The same concept will work on the big block of text on the left, Team, Awards, and Press. The elements of your close action need to start where the open action ends.
This is what your close action currently looks like:
With my adjustment:
Thank you for your help! I misunderstood on the first comment. All implemented. Thanks again
