After creating a script using jQuery to show/hide content when tabs are clicked (which also changes the color of the clicked tab), everything is functioning smoothly. However, I believe there may be a more efficient way to switch between content that allows for easier addition of more tabs. Any assistance in improving this functionality would be greatly appreciated. Feel free to ask if you have any questions or need clarification. Here is a link to the current working version: https://jsfiddle.net/e572s3oq/embedded/result/.
Below is the relevant jQuery code snippet:
$(document).ready(function() {
$(".tab:first-child").click(function() {
$(".content p:nth-child(2)").css('display', 'none');
$(".tab:nth-child(2)").css('background-color', '#F5F7F7');
$(".tab:first-child").css('background-color', 'white');
$(".content p:first-child").css('display', 'block');
});
$(".tab:nth-child(2)").click(function() {
$(".content p:first-child").css('display', 'none');
$(".tab:first-child").css('background-color', '#F5F7F7');
$(".tab:nth-child(2)").css('background-color', 'white');
$(".content p:nth-child(2)").css('display', 'block');
});
});body,
html {
padding: 0;
margin: 0;
background-color: #ecf0f1;
}
#wrapper {
width: 260px;
margin: auto;
margin-top: 100px;
}
.tab {
width: 130px;
height: 30px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #7f8c8d;
display: block;
float: left;
}
.tab:hover {
cursor: pointer;
}
.tab:first-child {
background-color: white;
}
.tab:nth-child(2) {
background-color: #F5F7F7;
}
.content {
width: 260px;
height: 300px;
background-color: white;
overflow: scroll;
}
.content p {
color: #7f8c8d;
font-size: 12px;
font-family: 'Lato', sans-serif;
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
}
.content p:first-child {
display: block;
}
.content p:nth-child(2) {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">
PAGE 1
</div>
<div class="tab">
PAGE 2
</div>
<div class="content">
<p>Content1</p>
<p>Content2</p>
</div>
</div>