Tab Panel - Pure html/css only, no JavaScript
These panels make use of html input elements and radio button elements and some complicated css to implement tabbed panels without any JavaScript needed. They make use of styling the radio buttons and the "checked" attribute. Note: One panel always remains open because one input is always checked.
The css required is very tricky making use of things such as:
.tabs-container input[type="radio"] {}
.tabs-container input[type="radio"]:checked + label {}
.tabs-container input[type="radio"]:checked + label + .tab-content {}
Presets Section
Welcome to the home page content.
Filters Section
Manage your account settings and profile information.
Settings Section
Configure your application preferences here.
Advance Settings Power Users
Do really advanced stuff here.
Super top secret stuff.
Tab Panel - html/css/js - allows no panels to be open
This is a different approach to panels which will allow for the current active panel to be closed by clicking the active button or clicking within the active panel, totally configurable at any level of the container. This requires JavaScript. Key differences from above, it does not use html input elements or radio buttons, but instead uses just plain html button tags. The buttons are disconnected from the panels but MUST be contained in the same tab-container for the JavaScript to work correctly.
The system is entirely data-attribute driven, the classes are just for styling and the JavaScript does not know about any classes other than the "active" class which is used to style the active button and active panel (to show or hide it).
At the outermost level, the panel container must have "data-tab-container" defined, no value is needed. The tabPanelInit() function will locate all of these containers and register a click event handler. Within the data-tab-container, there are two sections, one for tab buttons and one for tab panels. Buttons are matched with panels by each having a matching data-tab-id="myid". "myid" only needs to be unique within the container, they can be resued over and over throughout the document as long as in different containers, including nested containers.
The "active" class signals that the panel is active, the initial HTML should set this class if a button/panel is to be initially displayed as active before any user clicks. You can define an initial active panel that does not have a corresponding button, this special case can be used to show initial instructions, it will get hidden as soon as any tab is clicked and can optionally be removed when the panel itself is clicked (or click a "got it" fake link).
The buttons make use of data attributes. On the buttons there MUST be a data-target="id" which needs only to be unique within the tab-container. This allows for multiple tab containers to exist in single document without having to worry about the id being unique across the entire document like would be required if this was to use html ids. The corresponding (matching) tab panel must have a data attribute called data-tab-id="id" with the same id used in the button. There is one special panel id called data-tab-id="data-tab-empty" that can be used for an optional mini or collapsed panel which is shown when no other panels are active. If a tab-btn and tab panel have the "active" class present, that panel will be shown at initial rendering.Simple Non-collapsible Tab Panel
Tab1: One panel will always be open
Welcome to the tab panels example, this panel is displayed initially.
More content so this box is larger.
Tab2 panel with link
This panel has a clickable link
Click Me!The link will open in a new tab and this tab will remain open
Collapsible Tab Panel with features
Initial Panel (collapsible)
This panel is initially displayed because it has class "active". It has no matching data-tab-id button so once closed it cannot appear again.
The panel itself is not clickable, so typically there would be a button to hide it
Tab1: Panel closes by clicking panel button
Welcome to the tab panels example, this panel is displayed initially.
More content so this box is larger.
Tab2 panel with link
This panel has a clickable link
Click Me!The link will open in a new tab and this tab will remain open
Simple Non-collapsible Tab Panel
Presets Section
Welcome to the home page content.
more content so this box is larger.
Filters Section
Manage your account settings and profile information.
This panel has a clickable linkThe link will open in a new tab
Click me only to hide
clicking anywhere in the panel should hide it.
Tab Panel - JavaScript test cases
This section covers invalid html documents and can be used for testing error paths such as no id, no matching id, etc.
Testing Multi-select buttons minimum 1 selected
Overview content goes here...
Tasks content goes here...