https://www.nogihisa.com.tw/Scripts/responsive-tabs.js

1var 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 = $( '<div></div>', {
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					$( '<div>' ).attr( 'class', newParentClass ).html(
61						$( '<div>' ).attr( 'class', 'panel-heading' ).html(
62							$( '<h6>' ).attr( 'class', 'panel-title' ).html(
63								$( '<a>', {
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						$( '<div>', {
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 || { } ) );