Toggle not working

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");
});

One problem i have now is its not working properly, when i click on image it gets a bit messed up. For example when i click on it width doesnt change properly, i cant make it to go higher, and it also shifts to right and bottom for a bit from its parent element which is a div of column, i can fix it by setting toggle’s left=0 and top=0; but it still doesnt work properly, im trying it to once its clicked to go towards right and bottom over other pictures at the same time with transition if you know what i mean which is why i tried using position absolute along with z-index. So i click on image and it gets bigger so i can view it better. Is there a possible way of doing it?