wwp
เวอร์ชั่น 1.0 by bootstrap 3.3.7
Tab collapse
1
2
3
4
		
		<div class="tab-default">
			<div class="tab-collapse">
				<ul class="nav-list tab-collapse-md">
					<li class="active">
                        <a class="link" data-toggle="tab" href="#tab-1">Tab 1</a>
                    </li>
                    <li>
                        <a class="link" data-toggle="tab" href="#tab-2">Tab 2</a>
                    </li>
                    <li>
                        <a class="link" data-toggle="tab" href="#tab-3">Tab 3</a>
                    </li>
                    <li>
                        <a class="link" data-toggle="tab" href="#tab-4">Tab 4</a>
                    </li>
				</ul>
				<div class="tab-content">
                	<div class="tab-pane fade in active" id="tab-1">1</div>
                	<div class="tab-pane fade" id="tab-2">2</div>
                	<div class="tab-pane fade" id="tab-3">3</div>
                	<div class="tab-pane fade" id="tab-4">4</div>
                </div>
			</div>
		</div>
		
	
		
		.tab-default .nav-list{margin-bottom: 10px;}
		.tab-default .nav-list > li + li{margin-left: 10px;}
		.tab-default .nav-list .link{display: block; height: 40px; padding: 0 30px; line-height: 40px; background-color: #ddd; color: #fff; font-size: 14px; font-weight: bold;}
		.tab-default .nav-list .active .link{background-color: #333;}

		.tab-default .panel-group .panel{border: none;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
		.tab-default .panel-default > .panel-heading + .panel-collapse > .panel-body{padding: 0;}
		.tab-default .panel-default > .panel-heading{border: none; background-color: transparent; padding: 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
		}
		.tab-default .panel-default > .panel-heading .link{display: block; padding: 0 15px; font-weight: bold; font-size: 14px; color: #fff; background-color: #333; height: 40px; line-height: 40px;}
		.tab-default .panel-default > .panel-heading .link.collapsed{color: #fff; background-color: #ddd;}
		.tab-default .panel-group{margin-bottom: 0;}
		.tab-default .panel-group .panel-heading + .panel-collapse > .panel-body, 
		.tab-default .panel-group .panel-heading + .panel-collapse > .list-group{border: none;}
		.tab-default .panel-group .panel + .panel{margin-top: 5px;}
		
	
								
									$(document).ready(function () { 
										$('.tab-collapse').tabCollapse();

									    $('.tab-collapse-sm').tabCollapse({
									        tabsClass: 'visible-lg visible-md hidden-sm hidden-xs',
									        accordionClass: 'visible-sm visible-xs'
									    });

									    $('.tab-collapse-md').tabCollapse({
									        tabsClass: 'visible-lg hidden-md hidden-sm hidden-xs',
									        accordionClass: 'visible-md visible-sm visible-xs'
									    });
									});