Let’s look at a simple tab script written in html, css and js (jQuery). You can implement this tab script into any CMS system or any framework.
HTML code:
<!-- HTML BLOCK -->
<div class="tabs-wrapper">
<div class="tabs">
<span class="tab">Tab 1</span>
<span class="tab">Tab 2</span>
<span class="tab">Tab 3</span>
</div>
<div class="tabs-content">
<div class="tab-item">Contents of tab number 1</div>
<div class="tab-item">Contents of tab number 2</div>
<div class="tab-item">Contents of tab number 3</div>
</div>
</div>
js code:
// jQuery Tabs
$('.tabs-wrapper').each(function() {
let ths = $(this);
ths.find('.tab-item').not(':first').hide();
ths.find('.tab').click(function() {
ths.find('.tab').removeClass('active').eq($(this).index()).addClass('active');
ths.find('.tab-item').hide().eq($(this).index()).fadeIn()
}).eq(0).addClass('active');
});CSS code:
/* CSS code */
.tabs-wrapper .tabs .tab.active {
color: #ff0000;
border-color: #ff0000;
}
.tabs-wrapper .tabs {
display: flex;
gap: 10px;
}
.tabs-wrapper .tabs .tab {
border-radius: 5px;
border: 2px solid #ECECEC;
background: #FFF;
padding: 10px 30px;
color: #888;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.tabs-wrapper .tabs-content {
border-radius: 5px;
background: #FFF;
box-shadow: 0px 4px 40px 0px rgba(98, 96, 93, 0.09);
padding: 30px;
margin-top: 20px;
}You can style this script at your discretion.
