Multiple unwanted clicks with showing/hiding DIV elements Javascript

Question

I have written a function which hides or shows the content of a div when you click on the applicable button. However, when I do so, you have to click the button a couple of times before it shows the content. After that only one click is needed until you click on a unrelated button then the same thing happens. Here is the function: Does anybody have a solution please?

function openBtn(){
  var acc = document.getElementsByClassName("myDIV");
  var i;

  for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      };
  }
}

UPDATE Here is the full code for the website as requested:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="sample_reception_page.css">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
.active, .accordion:hover {
    background-color: #ccc; 
}
.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}
.close:hover {
  background-color: #f44336;
  color: white;
}
</style>
</head>
<body>

<h2>Example</h2>
<button onclick="newSample()">ADD</button>

<div id="samplesinfo">
    <div class="test">
        <button onclick="delbtn()" class="delbtn" id="delbtn" style="float: right;">Delete</button>
        <button onclick="openBtn()" id="sample" class="accordion" style="float: left;">Button</button>
        <div id="usrInput" class="panel">
          <input type="text" name="test">
        </div>        
    </div>  
</div>
<div id="paste">    
</div>


<script>


function openBtn(){
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      };
  }
} 

  function newSample() {        
    var variable = document.getElementById("samplesinfo");
    var copy = variable.cloneNode(true);
    var paste = document.getElementById("paste");
    paste.appendChild(copy)
  }

function delbtn() {
  var delbtn = document.getElementsByClassName("delbtn");
  var i;
  for (i = 0; i < delbtn.length; i++) {
    delbtn[i].onclick = function() {
        var div = this.parentElement;
        div.remove(div);        
    }
  }
}
</script>
</body>
</html>

Not clear what is your query. Can elaborate it ? `After that only one click is needed until you click on a unrelated button then the same thing happens` — Vikasdeep Singh, Jun 08 '18 at 07:53
And you should probably show the related markup as well, because its structure is not really clear from the code above. — Matus Dubrava, Jun 08 '18 at 07:55
For example, I would click on the button that should hide or show the content of the div, but I have to click multiple times until it does so. Once it hides or shows the content I can click it once to hide or show. But if I click another button with a different function and then back to the first button I have to click again multiple times before it works again. — , Jun 08 '18 at 07:56
See edit above, the first function is the code causing the error. — , Jun 08 '18 at 07:58

Tushar Arora · Accepted Answer · 2018-06-08T08:08:18.347

1

You're applying muliple onclicks to the button with class="accordion".

Remove inline onclick from this button:

<button id="sample" class="accordion" style="float: left;">Button</button>

and call openBtn after defining it.

function openBtn() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.display === "block") {
              panel.style.display = "none";
          } else {
              panel.style.display = "block";
          }
      };
  }
}
openBtn()

Probably change the name of openBtn function also to reflect what it is actually doing which is adding onclick event listener to all the buttons with class accordion.

edited Jun 08 '18 at 08:08

answered Jun 08 '18 at 08:05

Tushar Arora

1,106
2
10
22

It works, but once you use the "add" button, the appended buttons do not work. – Jun 08 '18 at 08:08
Here's the reason: https://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners in short, `cloneNode` doesn't copy event listeners. You've to apply them again. – Tushar Arora Jun 08 '18 at 08:11
How would I reapply an eventlistener? – Jun 08 '18 at 08:22

Multiple unwanted clicks with showing/hiding DIV elements Javascript

1 Answers1