Hi, I am working on a website in which I have a CMS collection filtered inside a tabs module. Each tab has the same CMS collection but filtered to each year.
I am trying to have the cleaniest possible design when going to mobile, but for this I need to be able to hide all other tabs when one tab is on the “current” state, how can I achieve this without having to create different tab classes for each of them and creating interactions for them?
If this is not possible in an easy way, is there a way to make the tabs content sections of each one to appear under the “current tab” on mobile rather than having the content appear all the way at the end of the tab menu?
I’m having difficulty imagining how navigation would work, since the user would only be able to see one tab. However, at your mobile you could simply set the tab class to display: none, and the current tab to display: block.
Instead, I’d recommend you consider just shrinking the tabs; this is width: 33%, max-width: 33%, height: 60px.
Alternatively if you were trying to create a distinct UX for mobile, I’d probably build the tabs as plain DIVs with interactions to create the tabbing behavior. You’d have the advantage there that on desktop you could create it as a horizontal tab strip with a content pane beneath. On mobile, you could have it become an accordion instead.
Thank you so much. I will probably redo all this work into first an accordion component and then creating a slider inside of each accordion with the CMS collections filtered by year as I’m doing here. I think this design was going to bring me a lot of issues in the near future.
