A jQuery plug-in to control tab/accordion functions primarily for responsive sites.
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.
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.
| 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. |
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.