Vertical Accordion Reveal

Hello!

https://preview.webflow.com/preview/signify-studios-llc?utm_medium=preview_link&utm_source=designer&utm_content=signify-studios-llc&preview=570a784e5fd874938e5229dcf537b88a&mode=preview

I need some advice on making this vision come to life. Under the services section, I have created and animated an accordion reveal with rotating “+” & “X” symbols and the text gets revealed. Basically it looks like how I want it to look, but the functions don’t work all the time.

Problems:

  1. The “+” symbol sometimes gets confused with the “X” symbol and performs the closing animation when trying to open it. They both exist but they “show/hide” while rotating.
  2. The text that gets revealed when the tab opens doesn’t always get hidden when I click on another tab. I tried the “show/hide” option as well at the “opacity” to really try to make it not visible.
  3. I was going to worry about this later, but this might be affected by what I’m making now. I want to switch the tabs to be horizontal on mobile so they can open vertically. I would love some tips on how I should go about accomplishing that.

Thank you!!
Alexis