As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly.
I attempted to modify a template from w3schools by replacing it with my own classes/ids in the code. I expected a standard tab functionality but instead, both tabs display all content when clicked and then disappear until the page is refreshed.
I realize that my code may not be minimal, but I'm unsure of how much I can trim without losing important context. For reference, I tested this code on Firefox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: "Roboto" src: url("Roboto-Bold-webfont.woff") format("woff");
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: "Roboto" src: url("Roboto-Regular-webfont.woff") format("woff");
font-style: normal;
font-weight: 400;
}
body {
width: 100%;
font-family: "Roboto", sans-serif;
font-size: 15px;
line-height: 1.5em;
}
.page {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.sidebar {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
position: fixed;
top: 100px;
left: 50px;
width: 400px;
/* border: 1px solid red; */
}
.sidebar-button {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
}
.sidebar img {
height: 200px;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px 0 0 400px;
/* border: 1px solid red; */
}
.page-tab {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.tab {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
}
.sidebar-button,
.tab {
margin: 10px;
height: 45px;
background-color: #D99023;
border-radius: 5px;
border: none;
cursor: pointer;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 20px;
}
.sidebar-button:hover,
.tab:hover {
background-color: #9C5400;
}
.sidebar-button a {
text-decoration: none;
color: #FFFFFF;
}
.page-tab button:active {
background-color: #9C5400;
color: #FFFFFF;
}
.gallery-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 50px;
}
.gallery-container img {
height: 350px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Frogcroaks</title>
<link rel="stylesheet" href="master.css">
</head>
<body>
<div class="page">
<nav class="sidebar">
<img src="images/logo.png" alt="">
<button class="sidebar-button">
<a href="home.html">Home</a>
</button>
<button class="sidebar-button">
<a href="commissions.html">Commission</a>
</button>
<button class="sidebar-button">
<a href="about.html">About & Contact</a>
</button>
</nav>
<div class="content">
<nav class="page-tab">
<button class="tab" onclick="openGallery(event, 'character-design')">
Character Design
</button>
<button class="tab" onclick="openGallery(event, 'illustration')">
Illustration
</button>
</nav>
<div id="character-design" class="gallery-container gallery">
<img src="images/poufdesign1.png" alt="" class="gallery">
<img src="images/poufdesign2.png" alt="" class="gallery">
<img src="images/poufdesign3.png" alt="" class="gallery">
<img src="images/fairy-ring.png" alt="" class="gallery">
<img src="images/luminae.png" alt="" class="gallery">
<img src="images/griffoy.png" alt="" class="gallery">
<img src="images/pokemon.png" alt="" class="gallery">
</div>
<div id="illustration" class="gallery-container gallery" style="display=" none "">
<img src="images/eloa-growth2.png" alt="" class="gallery">
<img src="images/eloa-growth1.png" alt="" class="gallery">
<img src="images/seviper-zangoose.png" alt="" class="gallery">
</div>
</div>
</div>
<script>
function openGallery(evt, galleryName) {
// Declare all variables
var i, gallery, tab;
gallery = document.getElementsByClassName("gallery");
for (i = 0; i < gallery.length; i++) {
gallery[i].style.display = "none";
}
tab = document.getElementsByClassName("tab");
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" active", "");
}
document.getElementById(galleryName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>