Streaming live at 10am (PST)

Oder/position of dynamic CMS Tabs and content

I’m using the F’inSweet library to create a dynamic CMS tab list, on a blog page/template.

I was wondering if someone knows how to re-arrange content and tabs (for reference please look at the screenshots below):

  1. How can I adjust the tab content position so that clicking on the tab opens the content right below the respective tab (instead of at the bottom end of the tab list)? It would be similar to a drawer open/close kinda situation. Right now the content is displayed all the way on the bottom of the tab list and if you have a bunch of list items the content is a bit out of reach and requires additional scrolling. It’s even worse on mobile.
  2. Can I have a second text pulling from a different CMS field into the tab?

Is tabs the right way to accomplish this or is there a better solution?
Please keep in mind that tab names and content have to be dynamically pulled from the CMS – so having individual classes or IDs for each tab probably won’t be an option.

Is my explanation confusing, or is this a weird thing to do?

Ok, here is a simplified visual example.
That will hopefully generate some answers. I can’t possibly be the first one trying to do this.

Can anyone help me out here?!

@Rapha can you share a read only link?

Ok, here’s a sample:

I want the respective active content to always be right under the active tab, not at the very bottom.
The content will be pulled from the CMS, but I think the problem/solution is the same (except that I may not be able to give each tab or content a unique class in designer). Not sure.

I ended up using collections lists only and avoiding tabs.
But for future cases like the above I still wonder if/how i could be done.

@Rapha - What you describe is typically called an accordion layout which can be built using Interactions to handle the display and hiding of the content.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.