title: javascript hide/show div's accordion with two buttons ASP.NET
body: <p>I have several div's I want to hide a div on a button click and show on second button click. I would have used the .vissible fonction but the div's are generated in the backend so from what I understand I need to use javascript to solve the problem. </p>
  
  <p>Here is my backend code.</p>
  
  <pre><code>    protected void Page_Load(object sender, EventArgs e)
      {
          for (int i = 0; i &lt;= 10; i++)
          {
              HtmlGenericControl divTest = new HtmlGenericControl("div");
              divTest.Attributes.Add("class", "divClass");
              divTest.InnerText = "Div" + i;
              form1.Controls.Add(divTest);
  
              ImageButton collapseButton = new ImageButton();
              collapseButton.ImageUrl = "~/images/minus.png";
              collapseButton.Height = 20;
              collapseButton.Width = 20;
              divTest.Controls.Add(collapseButton);
  
              ImageButton expandButton = new ImageButton();
              expandButton.ImageUrl = "~/images/plus.png";
              expandButton.Height = 20;
              expandButton.Width = 20;
              form1.Controls.Add(expandButton);
  
  
          }
  </code></pre>
  
  <p>And here is my front end code.</p>
  
  <p>But the javascript dosen't produce the result I would like.</p>
  
  <pre><code> &lt;style&gt;
  .divClass {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
  }
  
  
  .collapseButton {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
      var acc = document.getElementsByClassName("divClass");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
  &lt;/script&gt;
  
  
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help to fix the javascript code would be greatly appreciated.  Here is what it looks like visually. When the button minus is pressed I want the div that contain the minus too be hidden. The plus shows the div that was hidden. </p>
  
  <p><a href="https://i.stack.imgur.com/nxhlf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nxhlf.png" alt="What the divs look like"></a> </p>