├── .jshintrc ├── README.md ├── LICENSE-MIT ├── params.json ├── .eslintrc ├── .jscsrc ├── js └── responsive-tabs.js └── index.html /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise" : true, 3 | "curly" : true, 4 | "eqeqeq" : true, 5 | "forin" : false, 6 | "latedef" : true, 7 | "newcap" : true, 8 | "noarg" : true, 9 | "noempty" : true, 10 | "undef" : true, 11 | "strict" : true, 12 | "trailing" : true, 13 | "evil" : false, 14 | "quotmark" : "single", 15 | "node" : true, 16 | "browser" : true, 17 | "sub" : true, 18 | "smarttabs" : true, 19 | "camelcase" : true, 20 | "maxparams" : 5, 21 | "unused" : "vars", 22 | 23 | "globals": { 24 | "module" : true, 25 | "require" : true, 26 | "define" : true, 27 | "before" : true, 28 | "beforeEach" : true, 29 | "describe" : true, 30 | "it" : true, 31 | "after" : true, 32 | "afterEach" : true 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bootstrap Responsive Tabs 2 | ========================= 3 | 4 | This uses standard Bootstrap 3.0.0 css and js for the tabs and collapse accordion items. They are regular [tabs](http://getbootstrap.com/javascript/#tabs) at some screen sizes and [collapsible](http://getbootstrap.com/javascript/#collapse) components based on the Bootstrap [Responsive Utilities](http://getbootstrap.com/css/#responsive-utilities), which can be defined by editing one attribute in the javascript file. 5 | 6 | Demo and Documentation 7 | ====================== 8 | To view the demo and documentation visit http://openam.github.io/bootstrap-responsive-tabs/ 9 | 10 | Key features 11 | ============ 12 | - Uses standard bootstrap tab markup. 13 | - Collapsible component (accordion) is created with jquery. 14 | - Tabs and accordions are accessible via keyboard. 15 | - Supports multiple tab groups on a page, with or without each being responsive. 16 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Michael Tuttle 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Bootstrap-responsive-tabs","tagline":"","body":"Bootstrap Responsive Tabs\r\n=========================\r\n\r\nThis uses standard Bootstrap 3.0.0 css and js for the tabs and collapse accordion items. They are regular [tabs](http://getbootstrap.com/javascript/#tabs) at some screen sizes and [collapsible](http://getbootstrap.com/javascript/#collapse) components based on the Bootstrap [Responsive Utilities](http://getbootstrap.com/css/#responsive-utilities), which can be defined by editing one attribute in the javascript file.\r\n\r\nDemo\r\n====\r\nTo view the demo visit http://openam.github.io/bootstrap-responsive-tabs/\r\n\r\nKey features\r\n============\r\n- Uses standard bootstrap tab markup.\r\n- Collapsible component (accordion) is created with jquery.\r\n- Tabs and accordions are accessible via keyboard.\r\n- Supports multiple tab groups on a page, with or without each being responsive.\r\n\r\nNotes\r\n=====\r\n- On load the first item in the accordion and tab views are set to active opened. However only the respective set will be show.\r\n- When the window is resized to change from accordion to tabs, the last tab that was opened will be opened even if a different accordion was selected.\r\n- Only tried in Chrome and Firefox, but it should work in IE as well.\r\n\r\nHow to use\r\n==========\r\n- Include bootstrap css and js.\r\n- Include responsive-tabs.js.\r\n- Setup tabs per the bootstrap documents.\r\n- Add a _responsive_ class to the _ul_ that is used to create the tabs.\r\n- Add a _responsive_ class to the _div_ that is used to create the tab-content.\r\n- Edit the responsive-tabs.js to set where you want to have collapse in place of tabs\r\n\r\n>__Note:__ The only difference from the standard bootstrap tab markup to the responsive markup is the addition of the responsive.\r\n\r\n```\r\n\r\n\r\n
\r\n
...content...
\r\n
...content...
\r\n
...content...
\r\n
\r\n```\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env" : { 3 | "node" : true, 4 | "browser" : true, 5 | "amd" : true, 6 | "mocha" : true 7 | }, 8 | 9 | "rules": { 10 | 11 | // Best Practices 12 | "complexity" : [ 1, 10 ], 13 | "consistent-return" : true, 14 | "curly" : true, 15 | "dot-notation" : true, 16 | "eqeqeq" : true, 17 | "no-else-return" : true, 18 | "no-eq-null" : true, 19 | "no-eval" : true, 20 | "no-extend-native" : true, 21 | "no-floating-decimal" : true, 22 | "no-implied-eval" : true, 23 | "no-labels" : true, 24 | "no-lone-blocks" : true, 25 | "no-loop-func" : true, 26 | "no-native-reassign" : true, 27 | "no-new" : true, 28 | "no-new-func" : true, 29 | "no-proto" : true, 30 | "no-redeclare" : true, 31 | "no-return-assign" : true, 32 | "no-script-url" : true, 33 | "no-self-compare" : true, 34 | "no-unused-expressions" : true, 35 | "no-with" : true, 36 | "no-yoda" : true, 37 | 38 | // Strict Mode 39 | "no-extra-strict" : true, 40 | "strict" : true, 41 | 42 | // Variables 43 | "no-catch-shadow" : true, 44 | "no-shadow" : true, 45 | "no-shadow-restricted-names" : true, 46 | "no-undef" : true, 47 | "no-undef-init" : true, 48 | "no-unused-vars" : false, 49 | "no-use-before-define" : true, 50 | 51 | // Node.js 52 | "handle-callback-err" : true, 53 | "no-mixed-requires" : true, 54 | "no-path-concat" : true, 55 | "no-process-exit" : true, 56 | 57 | // Stylistic Issues 58 | "brace-style" : "1tbs", 59 | "camelcase" : true, 60 | "consistent-this" : [ 0, "self" ], 61 | "func-names" : true, 62 | "new-cap" : true, 63 | "new-parens" : true, 64 | "no-nested-ternary" : true, 65 | "no-array-constructor" : true, 66 | "no-new-object" : true, 67 | "no-spaced-func" : true, 68 | "no-space-before-semi" : true, 69 | "no-ternary" : true, 70 | "no-underscore-dangle" : true, 71 | "no-wrap-func" : true, 72 | "quotes" : [ 2, "single", "avoid-escape" ], 73 | "quote-props" : true, 74 | "semi" : true, 75 | "space-in-brackets" : [ 1, "always" ], 76 | "space-infix-ops" : true, 77 | "space-return-throw-case" : true, 78 | "space-unary-word-ops" : true, 79 | "max-nested-callbacks" : [ 1, 4 ], 80 | "one-var" : false 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces" : [ 3 | "if", 4 | "else", 5 | "for", 6 | "while", 7 | "do", 8 | "try", 9 | "catch", 10 | "default" 11 | ], 12 | 13 | "requireSpaceAfterKeywords" : [ 14 | "if", 15 | "else", 16 | "for", 17 | "while", 18 | "do", 19 | "switch", 20 | "return", 21 | "try", 22 | "catch" 23 | ], 24 | 25 | "requireSpaceBeforeBlockStatements" : true, 26 | 27 | "requireSpacesInFunctionExpression" : { 28 | "beforeOpeningRoundBrace" : true, 29 | "beforeOpeningCurlyBrace" : true 30 | }, 31 | 32 | "requireSpacesInAnonymousFunctionExpression" : { 33 | "beforeOpeningRoundBrace" : true, 34 | "beforeOpeningCurlyBrace" : true 35 | }, 36 | 37 | "requireSpacesInNamedFunctionExpression" : { 38 | "beforeOpeningRoundBrace" : true, 39 | "beforeOpeningCurlyBrace" : true 40 | }, 41 | 42 | "requireSpacesInFunctionDeclaration" : { 43 | "beforeOpeningRoundBrace" : true, 44 | "beforeOpeningCurlyBrace" : true 45 | }, 46 | 47 | "requireSpacesInFunction" : { 48 | "beforeOpeningRoundBrace" : true, 49 | "beforeOpeningCurlyBrace" : true 50 | }, 51 | 52 | "disallowMultipleVarDecl" : true, 53 | "requireBlocksOnNewline" : true, 54 | "disallowEmptyBlocks" : true, 55 | "requireSpacesInsideObjectBrackets" : "all", 56 | "requireSpacesInsideArrayBrackets" : "all", 57 | "requireSpacesInsideParentheses" : "all", 58 | "requireSpaceAfterObjectKeys" : true, 59 | "requireCommaBeforeLineBreak" : true, 60 | "requireAlignedObjectValues" : "skipWithLineBreak", 61 | 62 | "requireSpaceBeforeBinaryOperators" : [ 63 | "+", 64 | "-", 65 | "/", 66 | "*", 67 | "=", 68 | "==", 69 | "===", 70 | "!=", 71 | "!==" 72 | ], 73 | 74 | "requireSpaceAfterBinaryOperators" : [ 75 | "+", 76 | "-", 77 | "/", 78 | "*", 79 | "=", 80 | "==", 81 | "===", 82 | "!=", 83 | "!==" 84 | ], 85 | 86 | "disallowImplicitTypeConversion" : [ "numeric", "boolean", "binary", "string" ], 87 | "requireCamelCaseOrUpperCaseIdentifiers" : true, 88 | "disallowMultipleLineStrings" : true, 89 | "disallowMultipleLineBreaks" : true, 90 | "validateLineBreaks" : "LF", 91 | "validateQuoteMarks" : { "mark": "'", "escape": true }, 92 | "validateIndentation" : "\t", 93 | "disallowMixedSpacesAndTabs" : true, 94 | "disallowTrailingWhitespace" : true, 95 | "disallowTrailingComma" : true, 96 | "disallowKeywordsOnNewLine" : [ "else", "catch", "finally" ], 97 | "requireLineFeedAtFileEnd" : true, 98 | "requireCapitalizedConstructors" : true, 99 | "safeContextKeyword" : [ "self", "that" ], 100 | "requireDotNotation" : true, 101 | "disallowYodaConditions" : true, 102 | 103 | "validateJSDoc" : { 104 | "checkParamNames" : true, 105 | "checkRedundantParams" : true, 106 | "requireParamTypes" : true 107 | }, 108 | 109 | "requireSpaceAfterLineComment" : true 110 | } 111 | -------------------------------------------------------------------------------- /js/responsive-tabs.js: -------------------------------------------------------------------------------- 1 | var fakewaffle = ( function ( $, fakewaffle ) { 2 | 'use strict'; 3 | 4 | fakewaffle.responsiveTabs = function ( collapseDisplayed ) { 5 | 6 | fakewaffle.currentPosition = 'tabs'; 7 | 8 | var tabGroups = $( '.nav-tabs.responsive' ); 9 | var hidden = ''; 10 | var visible = ''; 11 | var activeTab = ''; 12 | 13 | if ( collapseDisplayed === undefined ) { 14 | collapseDisplayed = [ 'xs', 'sm' ]; 15 | } 16 | 17 | $.each( collapseDisplayed, function () { 18 | hidden += ' hidden-' + this; 19 | visible += ' visible-' + this; 20 | } ); 21 | 22 | $.each( tabGroups, function ( index ) { 23 | var collapseDiv; 24 | var $tabGroup = $( this ); 25 | var tabs = $tabGroup.find( 'li a' ); 26 | 27 | if ( $tabGroup.attr( 'id' ) === undefined ) { 28 | $tabGroup.attr( 'id', 'tabs-' + index ); 29 | } 30 | 31 | collapseDiv = $( '
', { 32 | 'class' : 'panel-group responsive' + visible, 33 | 'id' : 'collapse-' + $tabGroup.attr( 'id' ) 34 | } ); 35 | 36 | $.each( tabs, function () { 37 | var $this = $( this ); 38 | var oldLinkClass = $this.attr( 'class' ) === undefined ? '' : $this.attr( 'class' ); 39 | var newLinkClass = 'accordion-toggle'; 40 | var oldParentClass = $this.parent().attr( 'class' ) === undefined ? '' : $this.parent().attr( 'class' ); 41 | var newParentClass = 'panel panel-default'; 42 | var newHash = $this.get( 0 ).hash.replace( '#', 'collapse-' ); 43 | 44 | if ( oldLinkClass.length > 0 ) { 45 | newLinkClass += ' ' + oldLinkClass; 46 | } 47 | 48 | if ( oldParentClass.length > 0 ) { 49 | oldParentClass = oldParentClass.replace( /\bactive\b/g, '' ); 50 | newParentClass += ' ' + oldParentClass; 51 | newParentClass = newParentClass.replace( /\s{2,}/g, ' ' ); 52 | newParentClass = newParentClass.replace( /^\s+|\s+$/g, '' ); 53 | } 54 | 55 | if ( $this.parent().hasClass( 'active' ) ) { 56 | activeTab = '#' + newHash; 57 | } 58 | 59 | collapseDiv.append( 60 | $( '
' ).attr( 'class', newParentClass ).html( 61 | $( '
' ).attr( 'class', 'panel-heading' ).html( 62 | $( '

' ).attr( 'class', 'panel-title' ).html( 63 | $( '', { 64 | 'class' : newLinkClass, 65 | 'data-toggle' : 'collapse', 66 | 'data-parent' : '#collapse-' + $tabGroup.attr( 'id' ), 67 | 'href' : '#' + newHash, 68 | 'html' : $this.html() 69 | } ) 70 | ) 71 | ) 72 | ).append( 73 | $( '
', { 74 | 'id' : newHash, 75 | 'class' : 'panel-collapse collapse' 76 | } ) 77 | ) 78 | ); 79 | } ); 80 | 81 | $tabGroup.next().after( collapseDiv ); 82 | $tabGroup.addClass( hidden ); 83 | $( '.tab-content.responsive' ).addClass( hidden ); 84 | 85 | if ( activeTab ) { 86 | $( activeTab ).collapse( 'show' ); 87 | } 88 | } ); 89 | 90 | fakewaffle.checkResize(); 91 | fakewaffle.bindTabToCollapse(); 92 | }; 93 | 94 | fakewaffle.checkResize = function () { 95 | 96 | if ( $( '.panel-group.responsive' ).is( ':visible' ) === true && fakewaffle.currentPosition === 'tabs' ) { 97 | fakewaffle.tabToPanel(); 98 | fakewaffle.currentPosition = 'panel'; 99 | } else if ( $( '.panel-group.responsive' ).is( ':visible' ) === false && fakewaffle.currentPosition === 'panel' ) { 100 | fakewaffle.panelToTab(); 101 | fakewaffle.currentPosition = 'tabs'; 102 | } 103 | 104 | }; 105 | 106 | fakewaffle.tabToPanel = function () { 107 | 108 | var tabGroups = $( '.nav-tabs.responsive' ); 109 | 110 | $.each( tabGroups, function ( index, tabGroup ) { 111 | 112 | // Find the tab 113 | var tabContents = $( tabGroup ).next( '.tab-content' ).find( '.tab-pane' ); 114 | 115 | $.each( tabContents, function ( index, tabContent ) { 116 | // Find the id to move the element to 117 | var destinationId = $( tabContent ).attr( 'id' ).replace ( /^/, '#collapse-' ); 118 | 119 | // Convert tab to panel and move to destination 120 | $( tabContent ) 121 | .removeClass( 'tab-pane' ) 122 | .addClass( 'panel-body fw-previous-tab-pane' ) 123 | .appendTo( $( destinationId ) ); 124 | 125 | } ); 126 | 127 | } ); 128 | 129 | }; 130 | 131 | fakewaffle.panelToTab = function () { 132 | 133 | var panelGroups = $( '.panel-group.responsive' ); 134 | 135 | $.each( panelGroups, function ( index, panelGroup ) { 136 | 137 | var destinationId = $( panelGroup ).attr( 'id' ).replace( 'collapse-', '#' ); 138 | var destination = $( destinationId ).next( '.tab-content' )[ 0 ]; 139 | 140 | // Find the panel contents 141 | var panelContents = $( panelGroup ).find( '.panel-body.fw-previous-tab-pane' ); 142 | 143 | // Convert to tab and move to destination 144 | panelContents 145 | .removeClass( 'panel-body fw-previous-tab-pane' ) 146 | .addClass( 'tab-pane' ) 147 | .appendTo( $( destination ) ); 148 | 149 | } ); 150 | 151 | }; 152 | 153 | fakewaffle.bindTabToCollapse = function () { 154 | 155 | var tabs = $( '.nav-tabs.responsive' ).find( 'li a' ); 156 | var collapse = $( '.panel-group.responsive' ).find( '.panel-collapse' ); 157 | 158 | // Toggle the panels when the associated tab is toggled 159 | tabs.on( 'shown.bs.tab', function ( e ) { 160 | 161 | if (fakewaffle.currentPosition === 'tabs') { 162 | var $current = $( e.currentTarget.hash.replace( /#/, '#collapse-' ) ); 163 | $current.collapse( 'show' ); 164 | 165 | if ( e.relatedTarget ) { 166 | var $previous = $( e.relatedTarget.hash.replace( /#/, '#collapse-' ) ); 167 | $previous.collapse( 'hide' ); 168 | } 169 | } 170 | 171 | } ); 172 | 173 | // Toggle the tab when the associated panel is toggled 174 | collapse.on( 'shown.bs.collapse', function ( e ) { 175 | 176 | if (fakewaffle.currentPosition === 'panel') { 177 | // Activate current tabs 178 | var current = $( e.target ).context.id.replace( /collapse-/g, '#' ); 179 | $( 'a[href="' + current + '"]' ).tab( 'show' ); 180 | 181 | // Update the content with active 182 | var panelGroup = $( e.currentTarget ).closest( '.panel-group.responsive' ); 183 | $( panelGroup ).find( '.panel-body' ).removeClass( 'active' ); 184 | $( e.currentTarget ).find( '.panel-body' ).addClass( 'active' ); 185 | } 186 | 187 | } ); 188 | }; 189 | 190 | $( window ).resize( function () { 191 | fakewaffle.checkResize(); 192 | } ); 193 | 194 | return fakewaffle; 195 | }( window.jQuery, fakewaffle || { } ) ); 196 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Tabs 4 | 5 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | Responsive Tabs 21 |
22 |
23 |
24 | 25 |
26 | 27 | 28 |
29 |

Responsive Tabs Example

30 |

This example illustrates how the responsive tabs works. It uses the standard Bootstrap responsive CSS and HTML, so it also adapts to your viewport and device. This page is using Bootstrap 3.3.6

31 |

To see the difference just resize the width of your window.

32 |
33 | 34 | 35 |
36 |

Examples

37 |
38 | 39 |

Responsive Tabs

40 | 41 |

Tabs with an assigned id.

42 |
    43 |
  1. First tab initialized as active.
    2. 44 |
  2. First and third tab have a deco-none class and the first has an additional red-class that are copied to the anchor tags in the accordions.
    3. 45 |
  3. First two tabs have extra class test-class that are copied to the div.panel-default in the accordions.
    4. 46 |
47 | 52 | 53 |
54 |
Tab 1 ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla.
55 |
Tab 2 ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.
56 |
Tab 3 ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.
57 |
58 | 59 |
60 | 61 |

Tabs without an assigned id.

62 |
    63 |
  1. Second tab initialized as active.
    2. 64 |
  2. Tabs are inside a panel.
    3. 65 |
  3. Fourth tab has panels within it.
    4. 66 |
67 |
68 |
69 |

Panel containing responsive tabs

70 |
71 |
72 | 78 | 79 |
80 |
Home ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla.
81 |
Profile ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.
82 |
Messages ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.
83 |
84 |

85 | Fourth ... 86 |

87 |
88 |
Panel heading without title
89 |
90 | Panel content 91 |
92 |
93 | 94 |
95 |
96 |

Panel title

97 |
98 |
99 | Panel content 100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 |

Standard Tabs (Non-Responsive)

108 | 109 | 114 | 115 |
116 |
Markup Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.
117 |
Profile 2 Content ... Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar.
118 |
Messages 2 Content ... Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar. Donec eu ipsum ut tellus convallis posuere. Sed tempor turpis laoreet dignissim mattis.
119 |
120 | 121 | 122 |
123 |

Documentation

124 |
125 | 126 |

How to use

127 |

Steps

128 |
    129 |
  1. Include bootstrap css and js.
    2. 130 |
  2. Include responsive-tabs.js.
    3. 131 |
  3. Setup tabs per the bootstrap documents.
    4. 132 |
  4. Add a responsive class to the ul that is used to create the tabs.
    5. 133 |
  5. Add a responsive class to the div that is used to create the tab-content.
    6. 134 |
  6. Call fakewaffle.responsiveTabs(['xs', 'sm']); in your load up script, while passing an array of bootstrap sizes that you want the to be displayed as accordions, e.g. ['xs', 'sm'] which is used by default.
    7. 135 |
136 |
Example Markup
137 |
138 | Note: The only difference from the standard bootstrap tab markup to the responsive markup is the addition of the responsive, and calling the fakewaffle.responsiveTabs(); function. 139 |
140 | 
141 | <ul class="nav nav-tabs responsive" id="myTab">
142 |   <li class="active"><a href="#home">Home</a></li>
143 |   <li><a href="#profile">Profile</a></li>
144 |   <li><a href="#messages">Messages</a></li>
145 | </ul>
146 | 
147 | <div class="tab-content responsive">
148 |   <div class="tab-pane active" id="home">...content...</div>
149 |   <div class="tab-pane" id="profile">...content...</div>
150 |   <div class="tab-pane" id="messages">...content...</div>
151 | </div>
152 | 
153 | <script type="text/javascript">
154 |   (function($) {
155 |       fakewaffle.responsiveTabs(['xs', 'sm']);
156 |   })(jQuery);
157 | </script>
158 | 159 |

Key Features

160 |
    161 |
  • Uses standard bootstrap tab markup
    • 162 |
  • Accordion is created with jquery
    • 163 |
  • Tabs and Accordion are the fully accessible via keyboard
    • 164 |
  • Supports multiple tabs on a page, with or without being responsive
    • 165 |
166 | 167 |

Additional Items

168 |
    169 |
  • Make the entire panel heading clickable, see Issue #5.
    • 170 |
171 | 172 |

Source

173 |

You may download the source code from github.

174 |
Reporting issues
175 |

If you have any issues with this please report in on github.

176 |
Contributing
177 |

If you'd like to contribute to this project, you can fork the project send a pull request.

178 | 179 |
180 | 181 | 182 | 183 | 184 | 200 | 209 | 210 | 211 | --------------------------------------------------------------------------------