Independently Toggle Display of Elements When Clicked

click-element.html

<h2 class="clickable-element" onclick="toggleContent(this)">Toggle H2 1</h2>
<p class="content">Content 1</p>

<h2 class="clickable-element" onclick="toggleContent(this)">Toggle H2 2</h2>
<p class="content">Content 2</p>

<h2 class="clickable-element" onclick="toggleContent(this)">Toggle H2 3</h2>
<p class="content">Content 3</p>

clickable-element.css

.content {
  display: none; /* initially hide content */
}

.clickable-element {
  cursor: pointer; /* add a pointer to indicate clickability */
}

toggle-content.js

function toggleContent(element) {
  var content = element.nextElementSibling;

  if (content.style.display === "none" || content.style.display === "") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
}