Streaming live at 10am (PST)

Help with an accordion/tabs component!

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.

  1. I’d like the first tab to be expanded upon page load
  2. 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

1 Like

Hey @Rebecca_Ramos

What you can do is clone this project > https://webflow.com/website/Perfect-Accordion-Dark > and take the basics from here.

Hope this helps :webflow_heart: