Dynamic way to hide divs vanilla javascript

Question

Is there a more dynamic way to hide/show divs that are identical in structure with no identifiers? Click to show I'm some stuff

<div class="setup" onclick="show(1)">
Click to show
  <p class="hidden">
    I'm more stuff
  </p>
</div>


function show(elem) {   
  var p = document.getElementsByClassName("hidden");
  if (p[elem] != undefined) {
    if (p[elem].style.display == "none") {
        p[elem].style.display = "block";
    } else {
      p[elem].style.display = "none";
    }
  }
}

http://jsfiddle.net/ba7yfmz6/29/

Answer 1

Use this:

<div class="setup" onclick="show(this)">

JavaScript:

function show(elem) {
    var paragraph = elem.querySelector(".hidden");
    if (paragraph.style.display == "none") {
        paragraph.style.display = "block";
    } else {
        paragraph.style.display = "none";
}

Hopefully this helps!

Answer 2

Yes, there is a way!

You can get all your elements, iterate them via forEach and assign your function to their onclick property:

document.querySelectorAll('.setup').forEach(div => {
    div.onclick = showElem;
});

Doing this, you can get rid of the onlick on your HTML elements.

---

To get their child element (the one you want to hide / show, obviously), your show() function can look like this:

function show() {
    const hidden = this.getElementsByClassName('hidden')[0];
    if (hidden.style.display == 'none') {
    hidden.style.display = 'block';
  } else {
    hidden.style.display = 'none';
  }
}

And all together:

document.querySelectorAll('.setup').forEach(div => {
	div.onclick = show;
});

function show() {
	const hidden = this.getElementsByClassName('hidden')[0];
	if (hidden.style.display == 'none') {
  	hidden.style.display = 'block';
  } else {
  	hidden.style.display = 'none';
  }
}

.setup {
  border-top: solid #ccc 3px;
  border-bottom: solid #ccc 3px;
  margin-bottom: 5%;
}

.setup:hover {
    cursor: pointer;
}

.hidden {
  text-align: center;
  font-weight: bold;
  border-top: solid black 3px;
  border-bottom: solid black 3px;
  background-color: yellow;
  display: none;
}

<div class="setup">
Click to show
  <p class="hidden">
    I'm some stuff
  </p>
</div>

<div class="setup">
Click to show
  <p class="hidden">
    I'm more stuff
  </p>
</div>

JS Fiddle: http://jsfiddle.net/ba7yfmz6/38/

---

More info:

forEach

querySelectorAll()

Answer 3

You can use this.

Also, since the div doesn't have a style attribute, checking for style.display === 'none' would always be false on the first click; it would set the the style.display to none. Checking for the computed style would show the hidden element on first click.

function show(el) {
  const toggle = el.querySelector('.hidden');
  
  toggle.style.display = window.getComputedStyle(toggle).display === 'none' ? 'block' : 'none';
}

.setup {
  border-top: solid #ccc 3px;
  border-bottom: solid #ccc 3px;
  margin-bottom: 5%;
}

.setup:hover {
    cursor: pointer;
}

.hidden {
  text-align: center;
  font-weight: bold;
  border-top: solid black 3px;
  border-bottom: solid black 3px;
  background-color: yellow;
  display: none;
}

<div class="setup" onclick="show(this)">
Click to show
  <p class="hidden">
    I'm some stuff
  </p>
</div>

<div class="setup" onclick="show(this)">
Click to show
  <p class="hidden">
    I'm more stuff
  </p>
</div>