Many pages have tab sections. Although normally we would use blocks, it is not supported to nest blocks within other blocks. So instead for this feature we will use section metadata to indicate that a section of the page is a tab.
When name/value pairs are added to section metadata [1] these are appended to the section's div as data attributes. What we need to do for this to work is:
1) Indicate a section type, e.g. type: Tab
2) Indicate tab name, name: Tab 1
From there the markup can be transformed and the tabs appear as if they were appended to the previous section. Also, the section following the last tab (if any) should also be appended to the previous section.
Mobile requirements:
The current site's implementation of tabs does not handle mobile very well at all. For now, just stack the tabs vertically but we will need to revisit this in a follow-up story.
Many pages have tab sections. Although normally we would use blocks, it is not supported to nest blocks within other blocks. So instead for this feature we will use section metadata to indicate that a section of the page is a tab.
When name/value pairs are added to section metadata [1] these are appended to the section's div as data attributes. What we need to do for this to work is: 1) Indicate a section type, e.g. type: Tab 2) Indicate tab name, name: Tab 1
From there the markup can be transformed and the tabs appear as if they were appended to the previous section. Also, the section following the last tab (if any) should also be appended to the previous section.
Mobile requirements:
The current site's implementation of tabs does not handle mobile very well at all. For now, just stack the tabs vertically but we will need to revisit this in a follow-up story.
[1] https://www.aem.live/developer/block-collection/section-metadata