Struggling to implement a product details tab within a table that features a clickable image. When the image is clicked, it should enlarge but the width doesn't adjust accordingly. I'm using bootstrap 5.3 and can't seem to identify the root cause of this issue. Below is my HTML and JavaScript code snippet.
<tr>
<td colspan="8" class="collapsible-content hidden">
<div class="container">
<div class="row">
<div class="col-xl p-0 d-flex justify-content-start overflow-hidden">
<a id="resizeButton"><img id="resim" src="img/mandalina.jpg" alt="" srcset="" width="100%" style="float: left" /></a>
</div>
<div class="col-xl col-auto d-flex text-align-start">
<p style="text-align: start">
Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
</div>
</div>
</div>
</td>
</tr>
var resim = document.getElementById("resim");
var originalWidth = resim.style.width; // storing original width
document.getElementById("resizeButton").addEventListener("click", function () {
if (resim.style.width === "150%") {
resim.style.width = originalWidth; // revert back to original width
} else {
resim.style.width = "150%"; // set width to 150%
}
});
I attempted adjusting column widths and adding z-index to the image div without success.