Menu icon Foundation
Idea: Switch components based on screen size

I'm just throwing this out there... it's not really a feature request yet; I'm just interested in whether it's feasible or if there's some other solution to this problem.

We've noticed a lot of use cases where we have some content that fits nicely in accordion on mobile but looks better in tabs on the desktop (or vice versa).

The markup is pretty much the same in each case (tabs/accordion) but to accomplish this, currently, the easiest option would probably be to duplicate the content in separate components on the page and use visibility to show/hide them.

What if you could just do something like: `<div class="accordion-on-small tabs-on-large"></div>` and they would switch seamlessly without the need for duplicate content?

accordiontabsmeia queries

I'm just throwing this out there... it's not really a feature request yet; I'm just interested in whether it's feasible or if there's some other solution to this problem.

We've noticed a lot of use cases where we have some content that fits nicely in accordion on mobile but looks better in tabs on the desktop (or vice versa).

The markup is pretty much the same in each case (tabs/accordion) but to accomplish this, currently, the easiest option would probably be to duplicate the content in separate components on the page and use visibility to show/hide them.

What if you could just do something like: `<div class="accordion-on-small tabs-on-large"></div>` and they would switch seamlessly without the need for duplicate content?

Jarryd Fillmore over 3 years ago

+1 to this!