Javascript - hide/show - multiple buttons - calling 1 function

Question

Please can someone explain this situation?

I want to use the same function (hide/show) for more buttons. How can I call the same function with different buttons?

I found how to do it with one but can't find any solution for 2 or more buttons.

I would like to hide div1 if I click on bt1 and hide div2 if I click on bt2. Thank you for any help...

My current code is:

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

<html>

<body>
  <button id="bt1" onclick="myFunction()">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction()">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

Thank you for your help...

score 0 · Accepted Answer · edited Feb 02 '21 at 22:36

You could pass the ID of the div to your function as a parameter:

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

<button id="bt1" onclick="myFunction('div1')">Button 1</button>
<div id="div1">div1</div>
<p></p>
<button id="bt2" onclick="myFunction('div2')">Button 2</button>
<div id="div2">div2</div>

score 0 · Answer 2 · answered Feb 02 '21 at 22:05

One way is to pass the ID of the DIV as a function parameter.

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

<html>

<body>
  <button id="bt1" onclick="myFunction('div1')">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction('div2')">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

Another way is to pass the button itself, and use DOM navigation, if the DIV to hide and show is always right after the button.

function myFunction(button) {
  var x = button.nextElementSibling;
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<html>

<body>
  <button id="bt1" onclick="myFunction(this)">Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button id="bt2" onclick="myFunction(this)">Button 2</button>
  <div id="div2">div2</div>
</body>

</html>

score 0 · Answer 3 · answered Feb 02 '21 at 22:09

I would do it like so:

Add a data-attribute like data-js-hide="div1"
Add a click event listener for all those elements having the attribute data-js-hide
when clicked use the value "div1" from the attribute data-js-hide

The advantages are that it does not matter where in DOM the elements are. You just need to set the attribute with id, and then on click the item with the id will be hidden or shown accordingly.

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

var buttons = document.querySelectorAll('[data-js-hide]');
buttons.forEach( 
    button => { 
        button.addEventListener('click', myFunction);
    }
);

<html>

<body>
  <button data-js-hide="div1" >Button 1</button>
  <div id="div1">div1</div>
  <p></p>
  <button data-js-hide="div2">Button 2</button>
  <div id="div2">div2</div>
  <p></p>
  <button data-js-hide="div3">Button 3</button>
  <div id="div3">div3</div>
</body>

</html>

Javascript - hide/show - multiple buttons - calling 1 function

3 Answers3