I currently have a sidebar menu that controls the display of content in the main section.
While I've successfully implemented it using JQuery, I can't help but feel like I'm repeating myself too much within the code.
Is there a more efficient way to achieve this functionality, making it more scalable and easier to add new elements without constantly updating the JQuery code?
If you'd like to take a look at my project, here is the link to the fiddle: https://jsfiddle.net/danjodesigns/9r20sfmb/3/
I would greatly appreciate any suggestions or improvements you may have.
JQuery:
$(".settings-btn-1").click(function () {
$('.settings-menu-btn').removeClass("active");
$(this).addClass("active");
$('.settings-view').removeClass("active");
$('.view-1').addClass("active");
});
$(".settings-btn-2").click(function () {
$('.settings-menu-btn').removeClass("active");
$(this).addClass("active");
$('.settings-view').removeClass("active");
$('.view-2').addClass("active");
});
$(".settings-btn-3").click(function () {
$('.settings-menu-btn').removeClass("active");
$(this).addClass("active");
$('.settings-view').removeClass("active");
$('.view-3').addClass("active");
});
HTML:
<div class="container">
<div class="settings-sidebar">
<ul class="settings-menu">
<li class="settings-menu-btn settings-btn-1 active"><span>Account Details</span></li>
<li class="settings-menu-btn settings-btn-2"><span>Profile Information</span></li>
<li class="settings-menu-btn settings-btn-3"><span>Categories</span></li>
</ul>
</div>
<div class="settings-view-placeholder">
<section class="settings-view view-1 active">
<h2>Account Details</h2>
<p>Review and update your account details.</p>
</section>
<section class="settings-view view-2">
<h2>Profile Information</h2>
<p>View your profile information.</p>
</section>
<section class="settings-view view-3">
<h2>Categories</h2>
<p>Review and update your store categories. These tags will determine what shoppers your store is suggested to.</p>
</section>
</div>
</div>
CSS:
.container {
display:flex;
flex-direction:row;
width:100%;
}
.settings-sidebar {
background-color:white;
margin-right:15px;
}
.settings-menu {
list-style:none;
padding:0;
margin:0;
width:250px;
}
.settings-menu-btn {
border-bottom:solid 1px #EEEEEE;
padding:15px;
cursor: pointer;
}
.settings-menu-btn.active {
background-color:#191919 !important;
color:#FFFFFF !important;
}
.settings-menu-btn:hover {
background-color:#F7F7F7;
}
.settings-view-placeholder {
background-color:#FFFFFF;
padding:30px;
flex-grow:1;
}
.settings-view {
display: none;
flex-direction:column;
}
.view-1.active,
.view-2.active,
.view-3.active {
display: flex !important;
}