Responsive Tabs to Accordion on mobile?

Design help General
1

Hi, you lovely lot.

Is there a way to set tabs to turn into an accordion at the mobile breakpoints?

Like this:

Screenshot 2021-03-01 at 18.27.40
Screenshot 2021-03-01 at 18.27.401270×1064 43 KB
Screenshot 2021-03-01 at 18.27.47
Screenshot 2021-03-01 at 18.27.472916×1234 309 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Yeah, it is pretty easy to achieve something like this.
Please share your read-only link and I will guide you, Hannah.

3

Amazing!

https://preview.webflow.com/preview/futrli-2021?utm_medium=preview_link&utm_source=designer&utm_content=futrli-2021&preview=f8bedf4e8f4e5e6c32f08aaaf2f18248&mode=preview

Home page!

4

Did you get the link Marius? Still would LOVE your help.

https://preview.webflow.com/preview/futrli-2021?utm_medium=preview_link&utm_source=designer&utm_content=futrli-2021&preview=f8bedf4e8f4e5e6c32f08aaaf2f18248&mode=preview

5

I’d like some help here too. Not great with code, but would love to learn

6

@Hannah_Dawson

Are you saying that you want an accordion aka dropdown inside of your tab? That is simple, just add a dropdown inside the tab content.

If you are saying that you want the tabs and their content to turn into a dropdown at a mobile break point, that also simple. Build both tabs and dropdowns and simply set your tabs to “display none” at whatever breakpoint you want and then the dropdowns to display at whatever breakpoint you want.