Im trying to make when i click on first image to show bigger in front of other elements and when i click on it again to go back to normal. But its not working. Any ideas?
HTML :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="portfolio.css">
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<a class="navbar-brand" href="#images" style="font-size: 25px">My Portfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home" style="font-size: 18px">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" style="font-size: 18px">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="font-size: 18px">About</a>
</li>
</ul>
</div>
</nav>
<!-- Jumbotron -->
<div class="container jumbotron" id="home">
<h1 class="text-primary">Welcome to my Portfolio</h2>
<p>Loren Ipsum some text goes here we'll see what soon</p>
<hr class="my-2">
<p>Something else will go here soon too</p>
</div>
<!-- About -->
<div class="about container" id="about">
<p>Hello im Ismar and im a student of web development and design. My goal is career change, so far to become
at least junior web developer and later improve my self to go up to senior. Excuse my bad english sometimes
im doing my best to make it as perfect as possible. If you wish to give me more, new and awesome tips i
can use for future projects, let me know by <a href="#contact">contacting me</a>.
</p>
</div>
<!-- Images -->
<div class="container text-center" id="images">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random image</p>
<img class="img-thumbnail" id="toggle" src="https://images.unsplash.com/photo-1531663766899-27c5b930c76b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5c933e9a799408178fe0f01eaaa71217&auto=format&fit=crop&w=701&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531715191146-cd2c1770a253?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f96160272735a53e3c67d6fb1aa922ce&auto=format&fit=crop&w=1350&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531617026134-1f86e3328200?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f11997e30ac1ad7991137ab57e44c56a&auto=format&fit=crop&w=800&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531553825746-fb6a8b36fd12?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=39ebb35267e72c544e6f6de32a9d898f&auto=format&fit=crop&w=634&q=80">
</div>
</div>
<div class="row text-center">
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531574373289-ad0d66e39ba9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b40369e11f1447830d7d1d7e02536a42&auto=format&fit=crop&w=634&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531511417141-ddea6e25bfc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f33cc49c5cb40d602366edca3bb16d2f&auto=format&fit=crop&w=1360&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531424491317-c31b42950e23?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=56148eef5f2f5cfe0c95c48d8146b69e&auto=format&fit=crop&w=1352&q=80">
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<p>Random Image</p>
<img class="img-thumbnail" src="https://images.unsplash.com/photo-1531387079845-b3bcdd83a14c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e8e37aac5488d819ce9ee1dd83988de3&auto=format&fit=crop&w=1350&q=80">
</div>
</div>
<!-- Contact-->
<div class="contact" id="contact">
<h3>Contact</h3>
<p>Contact me if you wish, im down to learn more about web development and design, im always into new stuff, new hacks, new tricks etc..
</p>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleFormControlFirstName">First name</label>
<input type="text" class="form-control" id="exampleFormControlFirstName" placeholder="First name">
</div>
<div class="form-group">
<label for="exampleFormControlLastName">Last name</label>
<input type="text" class="form-control" id="exampleFormControlLastName" placeholder="Last name">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Country</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>Bosnia and Herzegovina</option>
<option>Croatia</option>
<option>Serbia</option>
<option>Montenegro</option>
<option>Slovenia</option>
</select>
</div>
<div class="form-group">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
</form>
</div>
</div>
<!-- Footer -->
<footer class="footer container-fluid text-center bg-primary">
<p><i class="fas fa-envelope"></i> begic.ismar96@gmail.com</p>
<a href="https://www.facebook.com/ismar.begic.12" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://instagram.com/begaa_i/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://github.com/Bego96" target="_blank"><i class="fab fa-github"></i></a>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="portfolio.js" type="text/javascript"></script>
</body>
</html>
CSS:
body {
font-family: Raleway;
}
.jumbotron {
text-align: center;
padding-top: 50px;
margin-bottom: 0;
}
.jumbotron > h1 {
font-weight: 700;
font-size: 50px;
text-shadow: 2px 2px 2px gray;
}
.about > p {
padding-bottom: 35px;
}
.my-2 {
width: 50%;
}
.img-thumbnail {
height: 250px;
width: 100%;
}
.contact {
margin: 30px 0;
}
.contact > h3 {
margin-bottom: 20px;
}
.contact > p {
margin-bottom: 20px;
}
.footer {
height: auto;
}
.footer > p {
color: white;
padding-top: 20px;
padding-bottom: 10px;
}
.footer > p > a {
color: white;
font-size: 17px;
}
.footer > a > i {
color: white;
font-size: 25px;
padding-bottom: 25px;
padding-left: 5px;
padding-right: 5px;
}
#toggle {
transition: width 2s, height 4s;
}
#toggle#turn {
height: 400px;
width: 400px;
}
JavaScript:
var toggle = document.querySelector("#toggle");
toggle.addEventListener("click", function() {
this.classList.toggle("turn");
});