Post by Elli on Aug 16, 2019 11:39:00 GMT -7
Simple Tabs
Creates a simple tab component. No limit on the number of tabs. Not animated.
HTML
CSS
JavaScript
HTML
<div class="simple-tabs">
<ul class="simple-tabs__list">
<li class="simple-tabs__list-item simple-tabs__list-item--active">
<span>Tab 1</span>
</li>
<li class="simple-tabs__list-item">
<span>Tab 2</span>
</li>
</ul>
<div class="simple-tabs__content simple-tabs__content--active">
<p>Tab 1 content here</p>
</div>
<div class="simple-tabs__content">
<p>Tab 2 content here</p>
</div>
</div>
CSS
/* ======================================================
* Simple Tabs
* ====================================================== */
.simple-tabs {
background-color: #fff;
margin: 0 auto;
padding: 10px;
width: 1200px;
}
/* Tab List
* ====================================================== */
.simple-tabs__list {
background-color: #f1f1f1;
list-style-type: none;
margin: 0;
padding: 0;
}
.simple-tabs__list::before,
.simple-tabs__list::after {
content: '';
display: table;
}
.simple-tabs__list::after {
clear: both;
}
.simple-tabs__list-item {
border-bottom: 1px solid transparent;
cursor: pointer;
float: left;
}
.simple-tabs__list-item > span {
color: #000;
display: block;
font: 14px Verdana, Arial, sans-serif;
padding: 8px 12px;
white-space: nowrap;
}
.simple-tabs__list-item:hover,
.simple-tabs__list-item:focus,
.simple-tabs__list-item--active {
border-bottom-color: #00f;
}
.simple-tabs__list-item:hover > span,
.simple-tabs__list-item:focus > span,
.simple-tabs__list-item--active > span {
color: #00f;
}
/* Tab Content
* ====================================================== */
.simple-tabs__content {
display: none;
}
.simple-tabs__content--active {
display: block;
}
JavaScript
<script>
$(function() {
// Simple Tabs
(function simpleTabs() {
var currentTab = 0;
function openTab(clickedTab) {
var $thisTab = $('.simple-tabs__list-item').index(clickedTab);
$('.simple-tabs__list-item').removeClass('simple-tabs__list-item--active');
$('.simple-tabs__list-item:eq(' + $thisTab + ')').addClass('simple-tabs__list-item--active');
$('.simple-tabs__content').hide();
$('.simple-tabs__content:eq(' + $thisTab + ')').show();
currentTab = $thisTab;
}
$('.simple-tabs__list-item').click(function() {
openTab($(this));
return false;
});
$('.simple-tabs__list-item:eq(' + currentTab + ')').click();
})();
});
</script>