Responsive Tabs to Accordian

Design help General
1

Hi guys,

Not sure if this is the right place, may be better suited as a feature request, but here it goes.

I’m working with the tabs widget because its a great fit for how I’d like to display content on the desktop version (sidebar of stacked tab links.) The problem is that once you get down to the phone sizes the menu is basically useless. The sidebar takes up the whole screen with the actual tab content being mostly off screen. E.g. take a look at http://tabs.webflow.com/ on an iPhone.

I looked around to see how other people where handling and saw this:

http://jellekralt.github.io/Responsive-Tabs/demo/demo.html

Seems like a great solution for displaying tab like content on a phone. Has anyone attempted doing something similar in webflow?

Thanks!

3 Likes
2

I had this same problem the other day, with tabs becoming very small on mobile. This looks like a decent solution to try. I’m not sure how to go about it in webflow but thanks for the idea.

3

I’m also running into this issue. Does webflow have this functionality, to have tabs change to an accordion at the phone breakpoints?

OR is there a way to use the webflow interface to do this manually?

4

I would love this feature as well!

1 Like
5

Me too, that would be very nice!

6

Ditto… I am running into the same issue.

7

Or something like this maybe:
Transformer tabs

8

Hi, at the moment, the Tabs widget does not convert to Accordion layout for mobiles, this is a great idea though for a modification of the existing tabs widget or a new accordion widget. I am going to change the category of this post to the Feedback Wishlist Category.

In the meantime, you can also create accordions using interactions, check out the demokit of this in action:

https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page: Accordion

Check that and see if it helps. I checked out tabs.webflow.com on an iphone, and all tabs are visible to me at least with no problem seeing all of the content. I would be curious if anyone else is having problem to view the tabs.webflow.com on an iphone. Cheers, Dave

2 Likes
9

Thanks for the response Dave. The content is definitely visible but you have to scroll down and then back up after you read it if you want to see the next section, which seems counterintuitive to me. They aren’t broken by any means but I think that they would be greatly improved if the content could be reflowed a bit for mobile experiences. Thanks again, keep up the good work!

640×1136 122 KB

1 Like
10

Hi @brendan1, thanks, I can understand how viewing an accordion on phone would be easier than tabs :slight_smile: Thanks for pointing this out… I think that accordions are also more content friendly for mobile views too :smile:

We will definitely check this out :slight_smile: Cheers, Dave

11

Any update on this ?

12

Kindly use dropdown widget. It will give you the accordion feel. Sabanna has a sandbox in the forum. Have been trying to look for the link for you. It is cloneable. You can study it and craft yours. I’m so sorry I couldn’t.

13

I am going to change the category of this post to the Feedback Wishlist Category.

This post is not in the Wishlist category yet.