product-detail click through images

<script>

// product detail page toggle image
function myFunction(imgs) {
  // Get the expanded image
  var expandImg = document.getElementById("expandedImg");

  // Use the same src in the expanded image as the image being clicked on from the grid
  expandImg.src = imgs.src;
  // Show the container element (hidden with CSS)
  expandImg.parentElement.style.display = "block";
}


</script>


<aside class="col-md-6">
            <div class="card">
              <article class="gallery-wrap klang-gallery-wrap">
                <div class="img-big-wrap">
                    <img id="expandedImg" src="images/items/product-images/gibson-sg-2.jpg" onclick="myFunction(this);" />
                </div>
                <!-- slider-product.// -->
                <div class="thumbs-wrap">
                    <img class="item-thumb" src="images/items/product-images/gibson-sg-2.jpg" onclick="myFunction(this);"/>
                    <img class="item-thumb" src="images/items/product-images/gibson-sg-3.jpg" onclick="myFunction(this);"/>
                    <img class="item-thumb" src="images/items/product-images/gibson-sg-4.jpg" onclick="myFunction(this);"/>
                </div>
                <!-- slider-nav.// -->
              </article>
              <!-- gallery-wrap .end// -->
            </div>
            <!-- card.// -->
          </aside>