How can I show and hide text and image in an onclick function?

I am using bootstrap 4.3.1 and would like to have a clickable icon in my list of thumbnails for a text. I have a function where I click on the thumbnails and these images are displayed in large size next to them. Now I want to have the same thing for my text.

Here is the code:

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  //imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

<!--START Thumbnaill Navbar-->
<div style="overflow-y: auto; height: auto; width: 170px;">
  <img src="../image" alt="###" class="img-thumbnail border-0 img-thumbnail-desktop" onclick="myFunction(this);">

  <!--Here the icon for text -->

</div>
<!--END Thumbnaill Navbar-->

<!--Main Content-->
<div class="container expandedImgSize d-flex justify-content-center ">
  <span onclick="this.parentElement.style.display='none'"></span>
  <img class="img-fluid" id="expandedImg" src="../PlaceholderImage">
  </div>

Is there a elegant solution to show just the text? I'll try my best but i will probably need help from you guys ( 〃 ω〃)

Thanks you guys in advance!

How can I show and hide text and image in an onclick function?

0 Answers