How can I make a general JavaScript function to toggle the visibility of a div on click?

Question

I have a webpage with a layout of multiple divs in a gridlike arrangement that all are going to contain separate text. When clicked, I want the grid to expand into a div that is z-indexed above the other elements. on click of this div, it will close.

The thing is, I do not want to make a separate function for each one of the divs, instead I want to make a generic function that will recognize which div is being clicked, and then access the divs child paragraph element and toggle that. (There is also an img within the div).

here is a cut of the HTML with the overall format that the other sections follow.

<div id="Section" onclick="portfolio()">
  <h6 class="number">2. Stand Up Jetski</h6>
  <img src="../resources/images/icons8-paper-ship-100.png" 
       alt="Brake Disc" 
       id="click-image">
  <p class="popuptext" id="jetski-text">  random </p>
</div>
<div id="Section" onclick="portfolio()">
  <h6 class="number">3. PC build</h6>
  <img src="../resources/images/icons8-workstation-100.png" 
       alt="Brake Disc" 
       id="click-image">
  <p class="popuptext" id="pc-text"> random  </p>
</div>

Here is the javascript I came up with from internet searches.

//Portfolio Pop ups//
function portfolio() {
  parent = document.getElementById('Section');
  children = parent.children[0];
  children.classlist.toggle('show')
}

Here is the CSS I have for these popup texts

.popuptext {
  border      : 1px solid var(--black);
  z-index     : 100;
  position    : absolute;
  left        : 50%;
  top         : 50%;
  margin-left : -500px;
  margin-top  : -50px;
  height      : 1000px;
  width       : 1000px;
  visibility  : hidden;
  }
.popuptext .show {
  visibility : visible;
  }

As explained earlier, when I click the div, I want the

child element to toggle visibility. So far, when I click, nothing happens.

Part of the problem is that you have multiple HTML elements using the same ID value, when it must be unique. What you probably want to do is get all of the Div or P tags you want clickable, probably by using getElementsByClass(), and then add a 'click' event listener to each via a for loop that uses classList.toggle for the show class — nigh_anxiety, Oct 28 '22 at 04:52
use a parent for all this divs, then do it it whith event delegation... — Mister Jojo, Oct 28 '22 at 04:54
To elaborate on Mister Jojo's comment, read about [the `Event.target` property](https://developer.mozilla.org/en-US/docs/Web/API/Event/target). — rainbow.gekota, Oct 28 '22 at 05:20
Does this answer your question? "[How can I get the Element if I am in the function of its EventListener](/q/57216533/90527)". See also "[Getting associated img from HTML area](/q/817925/90527)", "[How to give unique row id to rows in display tag table?](/q/10279674/90527)", "[Hide div when click on a link inside it](/q/10484120/90527)", "[Getting clicked element from ul](/q/27543677/90527)", the [help], including on [searching](/help/searching), and "[How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/q/261592/90527)". — outis, Oct 28 '22 at 05:38

score 0 · Answer 1 · answered Oct 28 '22 at 05:04

You have an issue with some of your js and your CSS. You want to pass the clicked element into your event using this. Then use querySelector() to drill down to the popup text and toggle it. Finally in your CSS, use 100vw and 100vh to make the text fill the page, and use flex to center the text in the div.

I also just changed your ids to classes for the sections, you can only have one id of the same name per webpage.

function portfolio(el) {
  const textEl = el.querySelector('.popuptext')
  textEl.classList.toggle('show')
}

.popuptext {
  border: 1px solid #000;
  z-index: 100;
  visibility: hidden;
  display: flex;
  height: 100vh;
  width: 100vw;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.popuptext.show {
  visibility: visible;
}

<div class="section" onclick="portfolio(this)">
  <h6 class="number">2. Stand Up Jetski</h6>
  <img src="../resources/images/icons8-paper-ship-100.png" alt="Brake Disc" id="click-image">
  <p class="popuptext" id="jetski-text"> random 1 </p>
</div>
<div class="section" onclick="portfolio(this)">
  <h6 class="number">3. PC build</h6>
  <img src="../resources/images/icons8-workstation-100.png" alt="Brake Disc" id="click-image">
  <p class="popuptext" id="pc-text"> random 2 </p>
</div>

How can I make a general JavaScript function to toggle the visibility of a div on click?

1 Answers1