<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br/><br/>
<div class="tabs">
<div class="tab-button-outer">
<ul id="tab-button">
<li><a href="#tab01">Tab 1</a></li>
<li><a href="#tab02">Tab 2</a></li>
<li><a href="#tab03">Tab 3</a></li>
<li><a href="#tab04">Tab 4</a></li>
<li><a href="#tab05">Tab 5</a></li>
</ul>
</div>
<div class="tab-select-outer">
<select id="tab-select">
<option value="#tab01">Tab 1</option>
<option value="#tab02">Tab 2</option>
<option value="#tab03">Tab 3</option>
<option value="#tab04">Tab 4</option>
<option value="#tab05">Tab 5</option>
</select>
</div>
<div id="tab01" class="tab-contents">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab02" class="tab-contents">
<h2>Tab 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab03" class="tab-contents">
<h2>Tab 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab04" class="tab-contents">
<h2>Tab 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab05" class="tab-contents">
<h2>Tab 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
</div>
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.tabs {
max-width: 640px;
margin: 0 auto;
padding: 0 20px;
}
#tab-button {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tab-button li {
display: table-cell;
width: 20%;
}
#tab-button li a {
display: block;
padding: .5em;
background: #eee;
border: 1px solid #ddd;
text-align: center;
color: #000;
text-decoration: none;
}
#tab-button li:not(:first-child) a {
border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
border-bottom-color: transparent;
background: #fff;
}
.tab-contents {
padding: .5em 2em 1em;
border: 1px solid #ddd;
}
.tab-button-outer {
display: none;
}
.tab-contents {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.tab-button-outer {
position: relative;
z-index: 2;
display: block;
}
.tab-select-outer {
display: none;
}
.tab-contents {
position: relative;
top: -1px;
margin-top: 0;
}
}
$(function() {
var $tabButtonItem = $('#tab-button li'),
$tabSelect = $('#tab-select'),
$tabContents = $('.tab-contents'),
activeClass = 'is-active';
$tabButtonItem.first().addClass(activeClass);
$tabContents.not(':first').hide();
$tabButtonItem.find('a').on('click', function(e) {
var target = $(this).attr('href');
$tabButtonItem.removeClass(activeClass);
$(this).parent().addClass(activeClass);
$tabSelect.val(target);
$tabContents.hide();
$(target).show();
e.preventDefault();
});
$tabSelect.on('change', function() {
var target = $(this).val(),
targetSelectNum = $(this).prop('selectedIndex');
$tabButtonItem.removeClass(activeClass);
$tabButtonItem.eq(targetSelectNum).addClass(activeClass);
$tabContents.hide();
$(target).show();
});
});
