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):
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.
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.
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.
@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.
