Hey all. I’m fairly new to website building and especially newish to Webflow. I’m having some issues trying to combine an accordion interaction with a hover interaction. One interaction seems to be overriding the other interaction rather than both working together seamlessly.
The effect I’m trying to produce is similar to the effect shown on this page:
Screenshot from that website—I’m trying to recreate the same actions:
In other words, the items start out at a lower level opacity, but get a little brighter when you hover over them (but still not quite 100% opacity… and also the left line appears on hover because it has 0% opacity beforehand), and then everything finally reaches 100% opacity when you click them to open the accordion. I’d absolutely love for the initial state to have the first of the three accordions already open and at 100% opacity (very similar to the website from above).
If you’re looking for even more details on opacity levels, I’m detailing them here as follows:
State #1: Initial State
Text = 30% opacity
Left yellow line = 0% opacity (i.e. hidden)
State #2: User Hovers Over Text
Text = 30% opacity to 60% opacity
Left yellow line = 0% opacity to 60% opacity (to match text opacity)
NOTE: Removing the hover should revert it back to State #1
State #3: User Clicks Text & Opens Accordion
Text = 60% opacity to 100% opacity
Left yellow line = 60% opacity to 100% opacity
NOTE: Clicking the accordion a second time should close the accordion and cause it to revert back to State #1. Clicking another accordion item above or below it should also collapse the original opened accordion item and revert its opacity back to the starting state #1.
Here is my public share link:
https://preview.webflow.com/preview/gt-entrepreneurs?utm_medium=preview_link&utm_source=designer&utm_content=gt-entrepreneurs&preview=fcf57915017a033c21ec58f5ad331691&workflow=preview