I followed a tutorial on W3 schools to create an image gallery. There are small thumb nails and when you click on one it it supposed to open in a larger image. This works well if you only have one gallery, but I want to display multiple. When I have more than one gallary they images all expand in one square instead of under the thumbnail images. I want them to all expand in their own gallery.
function myFunction(imgs) {
var expandImg = document.getElementsByClassName("expandedImg");
var imgText = document.getElementsByClassName("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Arryanna Wilson portfolio website</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="javascript.js"></script>
<link href="img/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="description" content="Arryanna Wilson Portfolio Gallary." />
<meta name="viewport" content="initial-scale=1.0,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
</head>
<body>
<img src="img/Logo.jpg" alt="Arryanna Wilson Graphic Design Logo" id="logo">
<hr>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<nav id="mobilenav">
<hr>
<ul>
<li><a href="index.html">Home</a></li>
<hr>
<li><a href="portfolio.html">portfolio</a></li>
<hr>
<li><a href="resume.html">resume</a></li>
<hr>
<li><a href="contact.html">contact</a></li>
</ul>
<hr>
</nav>
</div>
<span onclick="openNav()">menu</span>
<hr>
<div id="main">
<div class="row">
<h3> Science Magazine</h3>
<div class="column">
<img src="img/Portfolio/magazine/magazine.jpg" alt="Front cover and first two pages of a magazine assignment I created in some of my earlier quarters in college. It is not based on a real company or magazine." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/magazine/middle pages.jpg" alt="Content in this magazine was reseached and typed out by me. Science is another thing I am passionate about outside of college, so getting the oppertunity to create this was fun for me." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/magazine/Magazine back.jpg" alt="My images are not original, but still I am proud of this piece." onclick="myFunction(this);" class="expandingimgs">
</div>
</div>
<hr>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" alt="">
<div id="imgtext"></div>
</div>
<div class="row">
<h3> R&B Electronics inc.</h3>
<div class="column">
<img src="img/Portfolio/Templates/Brochure Mockup1.jpg" alt="The inside of a brochures created for a teacher. This is not the typical company I had done assignments with previously. I wanted to get out of my comfort zone." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/Templates/Brochure Mockup2.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
</div>
<hr>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" alt="">
<div id="imgtext"></div>
</div>
<div class="row">
<h3> Watchtower Hero Comics</h3>
<div class="column">
<img src="img/Portfolio/standards manuel/Standardfrontcoverpgs23.jpg" alt="The inside of a brochures created for a teacher. This is not the typical company I had done assignments with previously. I wanted to get out of my comfort zone." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/standards manuel/Standardsmanuelpgs4+5.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/standards manuel/standardsmpgs67.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/standards manuel/standardsmpgs8+9.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/standards manuel/standardmanuel-back+pg1011.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/standards manuel/Untitled-2.jpg" alt="I am still proud of my design." onclick="myFunction(this);" class="expandingimgs">
</div>
</div>
<hr>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" alt="">
<div id="imgtext"></div>
</div>
<div class="row">
<h3> Blue mountain Extracts</h3>
<div class="column">
<img src="img/Portfolio/Blue mountain/mailer portfolio.jpg" alt="Out of all of the parts I made for this project, this is my favorite one. I wanted to keep the theme with my next piece." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/Blue mountain/Billboard-linkdin.jpg" alt="This is a Billboard advertising Blue Mountain Extracts. Making the art for these pieces was really fun and calming." onclick="myFunction(this);" class="expandingimgs">
</div>
<div class="column">
<img src="img/Portfolio/Blue mountain/Magazine Ad.jpg" alt="This design is a full page magazine ad. It differs from the themes of my other pages, but I still think it looks nice." onclick="myFunction(this);" class="expandingimgs">
</div>
</div>
<hr>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" alt="">
<div id="imgtext"></div>
</div>
<div class="row">
<h3> Single pieces</h3>
<div class="column">
<img src="img/Portfolio/kast iron.jpg" alt="This is a flyer made for Kast Iron Soda Works, my favorite place in the world. This flyer is to allow customers to see events that are going on a" onclick="myFunction(this);" class="expandingimgs">
</div>
</div>
<hr>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" alt="">
<div id="imgtext"></div>
</div>
</div>
<!--ends main-->
<footer>
<p>330-831-6298</p>
<p>[email protected]</p>
<hr>
<hr>
<p>All work shown here was done as part of an educational assignment to complete my degree. The work was NOT commissioned or approved by the client or company shown. It does not represent the true identity of the client or company, except where noted.</p>
</footer>
</body>
</html>I tried changing everything into a class, which just stops it from working. I changed all my ids to classes and in java i changed it from get element by id to get elements by class name. Instead of working nothing happened when you clicked on the images. I also tried giving everything a unique ID and have multiple functions in the java script. Then instead of them all opening in the one spot up top they all opened in the bottom.