After spending a considerable amount of time on this, I'm still struggling to make it work properly.
The main issue is the gap between the tabs and the content area. I've tried adjusting the positioning, but it ends up affecting the overall layout in a negative way.
https://i.sstatic.net/mIHX7.png
Additionally, the alignment of the tabs with the content seems off. Currently, I have set the tabs to left: -80px; to separate them from the content. However, this causes problems depending on the user's screen size.
https://i.sstatic.net/C9HwE.png
If anyone has any suggestions or solutions for these issues, I would greatly appreciate it!
I've created a JSFiddle for testing purposes.
var tabTitles = ["First Tab", "Second Tab", "Third Tab", "Fourth Tab", "Fifth Tab", "Sixth Tab"];
$(".tabHeader").click(function() {
$(".tabHeader").removeClass("active");
var position = $(this).position();
var top = position.top;
$(".active").css("top", top);
$(this).addClass("active");
var text = $(this).text().trim();
switch (text) {
case "Tab 1":
$(".tabTitle").text(tabTitles[0]);
break;
case 'Tab 2':
$(".tabTitle").text(tabTitles[1]);
break;
case 'Tab 3':
console.log('yo');
//$('.textBody').html('TEST!');
$(".textBody").load("https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html", function(responseTxt, statusTxt, xhr) {
});
$(".tabTitle").text(tabTitles[2]);
break;
case 'Tab 4':
$(".tabTitle").text(tabTitles[3]);
break;
case 'Tab 5':
$(".tabTitle").text(tabTitles[4]);
break;
case 'Tab 6':
$(".tabTitle").text(tabTitles[5]);
break;
default:
$(".tabTitle").text("Select A TAB");
break;
}
});
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
}
.card {
display: flex;
flex-direction: row;
background-color: white;
margin: 0 auto;
margin-top: 10px;
width: 85%;
height: 100%;
box-shadow: 1px 2px 6px #d3d3d3;
border-radius: 4px;
}
.tabHeader {
width: 80px;
height: 50px;
background-color: #47bc8b;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.verticalTabs {
position: relative;
left: -80px;
right: 0px;
display: table-cell;
}
.active {
position: relative;
z-index: 50;
width: 80px;
height: 50px;
background-color: #259162;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.tabText {
position: absolute;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
margin-top: 16px;
margin-left: 23px;
}
.textHolder {
margin: 10px;
text-align: justify;
overflow: scroll;
overflow-x: hidden;
width: 100%;
}
.tabTitle {
font-size: 20px;
font-weight: 600;
padding: 0 0 20px 0;
}
<div class="tab-wrapper">
<div class="card">
<div class="verticalTabs">
<div class="tabHeader active">
<div class="tabText">Tab 1</div>
</div>
<div class="tabHeader">
<div class="tabText">Tab 2</div>
</div>
<div class="tabHeader">
<div class="tabText">Tab 3</div>
</div>
<div class="tabHeader">
<div class="tabText">Tab 4</div>
</div>
<div class="tabHeader">
<div class="tabText">Tab 5</div>
</div>
<div class="tabHeader">
<div class="tabText">Tab 6</div>
</div>
</div>
<div class="textHolder">
<div class="tabTitle">First Tab</div>
<div class="textBody"></div>
</div>
</div>
</div>