I have set up vertical tabs, but they seem to be duplicating all over the screen. My suspicion is on bootstrap, although I cannot confirm it.
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp I obtained the code for the vertical tabs from this source
Here is a snapshot of the issue: https://i.sstatic.net/5EJke.jpg (The image link only works this way) I attempted modifying some bootstrap elements without any success.
<div style="padding-top:100px;padding-bottom:100px" class="container">
<div class="row">
<div class="col-md-3 ">
<div class="list-group">
<a id="defaultOpen" style="padding: .75rem 1.25rem;" href="openCity(event, 'Dashb')" class="tablinks list-group-item list-group-item-action btn">Account Dashboard</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Info')" class="tablinks list-group-item list-group-item-action btn">Account Information</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Adbook')" class="tablinks list-group-item list-group-item-action btn">Address Book</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Orders')" class="tablinks list-group-item list-group-item-action btn">My Orders</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Preview')" class="tablinks list-group-item list-group-item-action btn">My Product Reviews</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Newsl')" class="tablinks list-group-item list-group-item-action btn">NewsLetter</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Psub')" class="tablinks list-group-item list-group-item-action btn">My Product Subscribtions</a>
<a style="padding: .75rem 1.25rem;" href="openCity(event, 'Creditc')" class="tablinks list-group-item list-group-item-action btn">My Credit Cards</a>
</div>
</div>
<div class="col-md-9">
<div id="Dashb" class="card tabcontent">
<div class="card-body">
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<div class="form-group row">
<label for="username" class="col-4 col-form-label">User Name</label>
<div class="col-8">
<input id="username" name="username" placeholder="Username" class="form-control here" required="required" type="text">
</div>
</div>
<div class="form-group row">
<label for="name" class="col-4 col-form-label">First Name</label>
<div class="col-8">
<input id="name" name="name" placeholder="First Name" class="form-control here" type="text">
</div>
</div>
<div class="form-group row">
<label for="lastname" class="col-4 col-form-label">Last Name</label>
<div class="col-8">
<input id="lastname" name="lastname" placeholder="Last Name" class="form-control here" type="text">
</div>
</div>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}