Hi everyone! I’ve gotten myself really confused about an accordion section I’m trying to create. Basically I’d like it to do something similar to Mailchimp’s accordion feature section here:
When you click on a tab, the accordion opens or closes to show/hide subtext and the picture to the right changes. For my page, I want to accomplish basically the same thing.
- I’d like the first tab to be expanded upon page load
- I’d like for the other tabs to collapse when a different one is opened
Below is my public share link. I used a tab element and set the flex box to horizontal to get the tabs and content side by side. I then used an animation to hide/show the tab subtext so the subtext only shows once the tab headline has been clicked on. What I’m really stuck on is having the other tabs collapse when a new tab is clicked into and also getting tab to be in a current state upon page load so ideally it’d look like this:
Thank you SO much in advance. Really excited to learn this. I feel like I’ve totally overcomplicated the matter in my mind and would really appreciate some assistance!
Here is my public share link: https://preview.webflow.com/preview/shogun-staging?utm_medium=preview_link&utm_source=designer&utm_content=shogun-staging&preview=cd6738350f8e4de9af0b38adda33a360&pageId=5e17419be2aa648eb89dcfdc&mode=preview