Hi! I want to use an accordion menu that expands and collapses a project’s description, and the only workaround I’ve found to make this work is to hide any imagery and content that’s below the accordion menu, which triggers by clicking the accordion (i.e. imagery animations: Opacity 100–0, Trigger: custom code accordion menu). Doing this lets there be enough blank space to actually read the text, and then collapsing the accordion brings back the imagery.
It’s a bit finicky overall, but it’s an even greater issue on mobile. The text in the accordion appears much longer on smaller screens, and usually you would just scroll back up to press on the close icon, to collapse the accordion. However, the expanded accordion menu is clickable anywhere, meaning, you can still trigger the opacity animation even without closing the accordion. This causes the text to overlap on the imagery, and just creates a huge mess.
Is there a way to isolate the clickable area of an accordion menu to just the close/open icon, rather than anywhere the accordion exists on the screen?
I’ve also attached a screenshot that visualizes the issue with the overlapping text on imagery
