├── LICENSE
├── bootstrap-tabcollapse.js
├── bower.json
├── example
├── example.html
└── lib
│ ├── css
│ └── bootstrap
│ │ └── bootstrap.css
│ └── js
│ ├── bootstrap
│ └── bootstrap.js
│ ├── jquery-1.10.1.min.js
│ └── jquery-migrate-1.2.1.min.js
└── readme.md
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 flatlogic.com
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/bootstrap-tabcollapse.js:
--------------------------------------------------------------------------------
1 | !function ($) {
2 |
3 | "use strict";
4 |
5 | // TABCOLLAPSE CLASS DEFINITION
6 | // ======================
7 |
8 | var TabCollapse = function (el, options) {
9 | this.options = options;
10 | this.$tabs = $(el);
11 |
12 | this._accordionVisible = false; //content is attached to tabs at first
13 | this._initAccordion();
14 | this._checkStateOnResize();
15 |
16 |
17 | // checkState() has gone to setTimeout for making it possible to attach listeners to
18 | // shown-accordion.bs.tabcollapse event on page load.
19 | // See https://github.com/flatlogic/bootstrap-tabcollapse/issues/23
20 | var that = this;
21 | setTimeout(function() {
22 | that.checkState();
23 | }, 0);
24 | };
25 |
26 | TabCollapse.DEFAULTS = {
27 | accordionClass: 'visible-xs',
28 | tabsClass: 'hidden-xs',
29 | accordionTemplate: function(heading, groupId, parentId, active) {
30 | return '
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
27 |
28 |
29 |
Light Blue - is a next generation admin template based on the latest Metro design. There are few reasons we want to tell you, why we have created it:
30 | We didn't like the darkness of most of admin templates, so we created this light one. We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
31 | We searched for a solution of how to make widgets look like real widgets, so we decided that deep background - is what makes widgets look real.
32 |
33 |
34 |
35 |
Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
36 |
37 |
38 |
They sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
a",n=d.getElementsByTagName("*")||[],r=d.getElementsByTagName("a")[0],!r||!r.style||!n.length)return t;s=a.createElement("select"),u=s.appendChild(a.createElement("option")),o=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t.getSetAttribute="t"!==d.className,t.leadingWhitespace=3===d.firstChild.nodeType,t.tbody=!d.getElementsByTagName("tbody").length,t.htmlSerialize=!!d.getElementsByTagName("link").length,t.style=/top/.test(r.getAttribute("style")),t.hrefNormalized="/a"===r.getAttribute("href"),t.opacity=/^0.5/.test(r.style.opacity),t.cssFloat=!!r.style.cssFloat,t.checkOn=!!o.value,t.optSelected=u.selected,t.enctype=!!a.createElement("form").enctype,t.html5Clone="<:nav>"!==a.createElement("nav").cloneNode(!0).outerHTML,t.inlineBlockNeedsLayout=!1,t.shrinkWrapBlocks=!1,t.pixelPosition=!1,t.deleteExpando=!0,t.noCloneEvent=!0,t.reliableMarginRight=!0,t.boxSizingReliable=!0,o.checked=!0,t.noCloneChecked=o.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!u.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}o=a.createElement("input"),o.setAttribute("value",""),t.input=""===o.getAttribute("value"),o.value="t",o.setAttribute("type","radio"),t.radioValue="t"===o.value,o.setAttribute("checked","t"),o.setAttribute("name","t"),l=a.createDocumentFragment(),l.appendChild(o),t.appendChecked=o.checked,t.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip;for(f in x(t))break;return t.ownLast="0"!==f,x(function(){var n,r,o,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",l=a.getElementsByTagName("body")[0];l&&(n=a.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",l.appendChild(n).appendChild(d),d.innerHTML="
36 |
37 | To activate tab collapse just include **bootstrap-tabcollapse.js** somewhere in your file and call:
38 |
39 | $('#myTab').tabCollapse();
40 |
41 | If you want to specify the class that is given to accordion and tabs components you can do so by passing options to `tabCollapse`:
42 |
43 | $('#myTab').tabCollapse({
44 | tabsClass: 'hidden-sm',
45 | accordionClass: 'visible-sm'
46 | });
47 |
48 | The default class is `hidden-xs`. So it means that tabs component will be switched to accordion for 767px and below. You can define your own classes and use them.
49 | You can also use multiple Bootstrap classes in order to, for example, show accordion for mobile + tablets and tabs for desktop+:
50 |
51 | $('#myTab').tabCollapse({
52 | tabsClass: 'hidden-sm hidden-xs',
53 | accordionClass: 'visible-sm visible-xs'
54 | });
55 |
56 | Events
57 | ------------
58 |
59 | There are four events tabcollapse triggers (for **entire** component, not for single tabs or accordion groups!):
60 | - **show-tabs.bs.tabcollapse** - triggered before tabs component is shown
61 | - **shown-tabs.bs.tabcollapse** - triggered after tabs component is shown
62 | - **show-accordion.bs.tabcollapse** - triggered before accordion component is shown
63 | - **shown-accordion.bs.tabcollapse** - triggered after accordion component is shown
64 |
65 | To attach event handler just call:
66 |
67 | $('#myTab').on('shown-accordion.bs.tabcollapse', function(){
68 | alert('accordion is shown now!');
69 | });
70 |
71 | Attach an event handler when **either** tab or collapse is opened:
72 | ------------
73 |
74 | $(document).on("shown.bs.collapse shown.bs.tab", ".panel-collapse, a[data-toggle='tab']", function (e) {
75 | alert('either tab or collapse opened - check arguments to distinguish ' + e);
76 | });
77 |
78 | Support
79 | ------------------------------
80 | For any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation!
81 |
82 | How can I support developers?
83 | ------------------------------
84 | - Star our GitHub repo :star:
85 | - Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
86 | - Follow us on [Twitter](https://twitter.com/flatlogic) :feet:
87 | - Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:
88 |
89 | Contributors
90 | ------------
91 |
92 | Thanks to [bdaenen](https://github.com/bdaenen) for contributing.
93 |
--------------------------------------------------------------------------------