title: How to get div to uncollapse
body: <p>Get guys,</p>
  
  <p>The following code works ok when click the div opens but i need it to close back when click the button again</p>
  
  <p>here is the JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function slide(){
  document.getElementById("sliding").style.maxHeight = "1000px";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>here is the css</p>
  
  <pre><code>#sliding{
      transition: 0.5s;
      max-height: 0px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>and the html</p>
  
  <pre><code> &lt;button onclick ="slide();" class="btn btn-primary"&gt;ADD COMMENT&lt;/button&gt; 
  
  
  
    &lt;div id = "sliding"&gt;
      &lt;p&gt;TEST&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>could someone help me out making it to hide back the div when clicked on button again?</p>
  
  <p>thanks a ton in advance</p>