Responsive Tabs
Tabs are useful for packing a lot of info into a small space and for grouping similar or related info.
Tabs are added as needed - up to a maximum of eight - and named as required.
Tabs
The tabs can be styled for font size, color, background color, hover background color and active tab background. They have a grid layout using minmax so that they fill the container width. There are controls to set the minimum width and the tab spacing.
When viewed on computers the hover transition is animated. The animation in and out times are preset.
The tabs have a checkbox for selecting the tab that will be active on page load.
The tab IDs are number 1 to 8 so the corresponding content block should have the same ID selected from the dropdown in the assets list.
Content
Content blocks have options for an image with alt text, a heading, a text block and a CTA style link. The link can be configured to open internal or external pages and has a new window option.
Images
The optional images are centered and have controls for maximum width and border radius and color.
Content Set Up
Content is added using the EverWeb API assets list. When setting up a content block, check the box to make it active so that the content can be seen while editing. Uncheck the box before moving to the next one.
When all the content blocks are finished, check the box to make the content which will be displayed on page load active and make sure it has the same ID as the active tab.
Mobile
On devices with screen widths less than the break point the tabs stack vertically and have a control to adjust the spacing.
Wrapper
The overall wrap has controls for background color and its opacity and there is a control for spacing the item vertically from those above and below it.
Animation
The tab content can have a fade in animation if required with the animation time set in milliseconds. The animation uses a CSS transiton to keep the amount of Javascript to a minimum.
Alternatives
The Metro Tabs can be used by those who like a splash of color on their web pages and the Switch Tabs can have a contrasting current tab color and switch to an accordion layout on mobile phones.