How can I click on a div and have it open a targeted div, then have the targeted div close when i cl-CodePudding

I have a gallery of 20 images and each image corresponds to a div with text in it. When i click on an image, the text should appear. When i click on the next image, that images text should appear WHILE closing the previous text div from the 1st image i clicked on.

So only one text box should be visible at one time.

so far i have this:

attachToggleListener("leifr","rosenvold");
attachToggleListener("damians","smith");
attachToggleListener("megan","adam");

 function attachToggleListener (buttonID, divID) {
  var myTrigger = document.getElementById(buttonID);
  if (myTrigger != null) {
    myTrigger.addEventListener("click", toggleDiv);
    myTrigger.targetDiv = divID; 
    }
   }

 function toggleDiv(evt) {
   var target = document.getElementById(evt.currentTarget.targetDiv);
    if (target.style.display === "block")
        { target.style.display = "none"; }
    else
        { target.style.display = "block"; }
   }

the text appears when i click on the image, but it does not close when i click on the next image. as it sits now, I can click on 4 images and 4 text divs will appear and only be removed when i click the image that made it appear.

Again what i was expecting was to click on an image "leifr" > the text box appears "rosenvold" >click on a second image "damians" > the second text box appears "smith" while the 1st text box "rosenvold" disappears

CodePudding user response：

You can modify your toggleDiv function to read all possible divs. I would suggest you to do 2 things.

Add a class to your divs. Say for example image_helper_text.

Modify your toggleDiv function to look something like

function toggleDiv(evt) {
    var target = document.getElementById(evt.currentTarget.targetDiv);
    var targets = document.getElementsByClassName("image_helper_text");

    // This will remove all other divs.
    if (targets && Array.isArray(targets) && targets.length) {
      targets.forEach((each) => {
      if (
        each.id !== evt.currentTarget.targetDiv &&
        each.style.display === "block"
      ) {
         each.style.display = "none";
        }
      });
    }
    if (target.style.display === "block") {
      target.style.display = "none";
    } else {
      target.style.display = "block";
    }
}

CodePudding user response：

Here's a basic example on how you can toggle between image captions. You have to keep track of the currently visible image caption (previousCaption) and then when a new image is clicked, simply hide previousCaption and display the new one.

const images = document.querySelectorAll(".image");
let previousCaption = null; //currently visible image caption
images.forEach((img) => {
  const caption = img.querySelector(".caption");
  img.addEventListener("click", () => {
    if (previousCaption) previousCaption.classList.toggle("hide");
    caption.classList.toggle("hide");
    previousCaption = caption;
  });
});

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.image {
  height: 100px;
  width: 100px;
  outline: 1px solid;
}

.hide {
  visibility: hidden;
}

<div >
  <div >caption1</div>
</div>
<div >
  <div >caption2</div>
</div>
<div >
  <div >caption3</div>
</div>