How do I create show/hide elements for different buttons?

Question

HTML Code...the buttons interfere with each other. How can I fix this?

<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
          <div id="help1"> 
            <p> Help </p>
          </div>

<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
          <div id="help2"> 
            <p> Help </p>
          </div>

Javascript shown with ids for the different buttons. Onload section to hide the content on page load.

<script>
  function myFunction() {
  var x = document.getElementById("help1");
  if (x.style.display === "none") {
  x.style.display = "block";
  } else {
  x.style.display = "none";
  }
  }
  window.onload = function() {
  document.getElementById("help1").style.display = 'none';
  };
</script>

<script>
  function myFunction() {
  var x = document.getElementById("help2");
  if (x.style.display === "none") {
  x.style.display = "block";
  } else {
  x.style.display = "none";
  }
  }
  window.onload = function() {
  document.getElementById("help2").style.display = 'none';
  };
</script>

Pick distinct function names? Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Use [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) instead of changing the `style` directly. — Sebastian Simon, Apr 03 '21 at 05:29

MichaelTr7 · Answer 1 · 2021-04-03T06:12:34.520

One was is to simply pass the id of the element as an input to myFunction so the corresponding element can be retrieved from the document and set to display:none. This will save you from needing duplicate functions. Press the blue Run code snippet button below to see the results.

Method 1:

function myFunction(ID) {
  var x = document.getElementById(ID);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}


window.onload = function() {
  document.getElementById("help1").style.display = 'none';
  document.getElementById("help2").style.display = 'none';
};

<button onclick="myFunction('help1')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
  <p> Help </p>
</div>

<button onclick="myFunction('help2')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
  <p> Help </p>
</div>

Alternative Method:

This example reduces the amount of JavaScript but slightly increases the amount of HTML id tags and classes. It also incoporates some additional CSS. As suggested in the comment above this method uses:

• Event listeners
• Toggles a class using classList

function myFunction() {
  document.getElementById("help" + String(this.id.split("_")[2])).classList.toggle("Display_It");
}


window.onload = function() {
  document.getElementById("Toggle_Button_1").addEventListener("click", myFunction);
  document.getElementById("Toggle_Button_2").addEventListener("click", myFunction);
};

#Toggle_Button_1,
#Toggle_Button_2 {
  margin-left: 50px;
}

.Help_Panel {
  display: none;
}

.Display_It {
  display: block;
}

<button id="Toggle_Button_1"> Click Here For Help </button>
<br>
<br>

<div class="Help_Panel" id="help1">
  <p>Help</p>
</div>

<button id="Toggle_Button_2"> Click Here For Help</button>
<br>
<br>

<div class="Help_Panel" id="help2">
  <p>Help</p>
</div>

Thanks @MichaelTr7! Just what I needed. – Mark H Apr 03 '21 at 06:09 — Mark H, Apr 03 '21 at 06:09
@Mark H No problem, happy to help. – MichaelTr7 Apr 03 '21 at 06:10 — MichaelTr7, Apr 03 '21 at 06:10

How do I create show/hide elements for different buttons?

1 Answers1

Method 1:

Alternative Method: