The What?
smartTabs is a jQuery plug-in you can use to add tabbed, accordion, and/or responsive tabbed/accordion content sections to your site. This is the first building block to be added to the cornerstoneUX architecture. Unlike add-ons for other frameworks and architectures, smartTabs can be used on any site by adding the style-sheets provided with the download. There is no limit to the number of content sections you can call on a page.
The Why?
After searching for a good solution to turn tabbed content into usable, accordion content within a responsive site, I decided it was time to try my hand at creating my own version. Taking my lead from mobile-first as well as regression for no CSS or JavaScript, I built smartTabs around using definition lists for the HTML structure. The style-sheet provides some basic formatting for the tabs and accordion structures. All the of the heavy-lifting is provided by the plug-in. It structures and provides the necessary navigation as well as the responsive conversion between tabs and accordions.
Plug-In Options
| Property | Default | Description |
|---|---|---|
| activeClass | 'current' | This is the class applied to the currently active tab or accordion. |
| breakpoint | 768 | This is the breakpoint at which you would like the tabs to convert to accordions when using them in a responsive environment. |
| breakTrigger | $(window) | A selector or DOM element that you would like to test the "outerWidth" of against the "breakpoint" specified. |
| contentHeight | 'fixed' | This is how you would like to content height to behave. Choose from 'fixed' to have the content fixed to the height of the largest block or 'auto' to have the content automatically adjust to the height of each block. |
| layout | 'auto' | The type of layout you would like your content to have. Choose from 'tabs' to have a fixed tab layout, 'accordion' to have a fixed accordion layout, or 'auto' to have a responsive tab to accordion layout. |
Installation
To install smartTabs is real easy. Just add a link to the smartTabs.css file in the HEAD of your page. Add a link to the jquery.smartTabs.js file below your link to jQuery, and add the initialization string to your page or external JavaScript file. If you are not using the cornerstoneUX architecture, you may want to use the alternate smartTabs--alt.css file which includes some basic structure resets.
Examples
Static Tabs
- Tab One
- Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.
- Tab Two
- Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.
- Tab Three
- Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!
Initialization
$('#js-smart-tabs--tabs').smartTabs({ layout: 'tabs' });
Static Accordion
- Tab One
- Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.
- Tab Two
- Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.
- Tab Three
- Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!
Initialization
$('#js-smart-tabs--accordion').smartTabs({ layout: 'accordion' });
Responsive Tabs -> Accordion
- Tab One
- Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.
- Tab Two
- Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.
- Tab Three
- Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!
Initialization
$('#js-smart-tabs').smartTabs();