title: Full height of Toggle shows when Toggle is closed
body: <p>I have a toggle that works perfectly, my problem is when the toggle is closed the the full height of the open toggle div still shows even when closed.</p>
  <p><a href="https://i.stack.imgur.com/lr2jl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lr2jl.png" alt="enter image description here" /></a></p>
  <p>It is annoying as the whole point of me using a toggle was to make more room on the page. This is my first time creating a toggle so i am not quiet sure how to resolve this issue.</p>
  <p>The content of my toggle is created via a string:</p>
  <pre><code>        echo(&quot;&lt;button id='onclick' onclick='toggle_visibility(\&quot;first_product$i\&quot;)'&gt; &quot; . $_SESSION['Food_Cat_name'] . &quot; &lt;/button&gt;&quot;);
  
          echo(&quot;&lt;div id='first_product'&gt;&quot;);
  
  
          echo(&quot;&lt;div id='first_product$i' class ='hidden'&gt;&quot;);
  
          echo(&quot;&lt;div id='red_head'&gt;&quot;);
          echo(&quot;&lt;p id='menu_title'  onclick='toggle_visibility(\&quot;first_product$i\&quot;)'&gt;  &quot; . $_SESSION['Food_Cat_name'] . &quot; &lt;/p&gt;&quot;);
          echo(&quot;&lt;/div&gt;&quot;);
  </code></pre>
  <p>Javascript</p>
  <pre><code>           //toggle and change bg colour
  function toggle_visibility(tog) {
      var e = document.getElementById(tog); 
      if(e.style.display == &quot;block&quot; || e.style.display == &quot;&quot;) { 
          e.style.display = &quot;none&quot;; 
        
      } else { 
          e.style.display = &quot;block&quot;; 
         
          
      } 
  }
  </code></pre>
  <p>I cannot seem to workout where i may have gone wrong.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//toggle and change bg colour
      function toggle_visibility(id) {
          var e = document.getElementById(id); 
          if(e.style.display == "block" || e.style.display == "") { 
              e.style.display = "none"; 
              text.innerHTML = "+"; 
          } else { 
              e.style.display = "block"; 
             text.innerHTML = "-";
              
          } 
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#first_product{
  width: 50%;
  margin-left: 320px;
  height: 300px;
  background-color: #f1f1f2 !important;
      
  }
  
  div#red_head{
  background-color: #ed1c24;
  height: 40px;
  color: #fff;
  padding-left: 15px;
  line-height: 35px;
  }
  
  #onclick{
  width: 50%;
  height: 30px;
  margin-left: 320px;
  background-color: #f8f9f9;
  border: 1px dashed #afafaf;
  border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id='onclick' onclick="toggle_visibility('first_product')"&gt;Toggle&lt;/button&gt;
  
  &lt;div id="first_product"&gt;
      &lt;div id="red_head"&gt;
          &lt;p id="menu_title" class ="hidden" onclick="toggle_visibility('first_product')"&gt;  Add your first menu item&lt;/p&gt;
      &lt;/div&gt;
      &lt;h3 id="menu"&gt;Menu Section&lt;/h3&gt;
  
      &lt;form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" &gt;               
  
          &lt;label id="cat_label" name="cat_label"&gt;Name&lt;/label&gt;
          &lt;input type="text" id="cat_name" name="cat_name" value=""&gt;
  
          &lt;label id="desc_label" name="desc_label"&gt;Description&lt;/label&gt;
          &lt;input type="text" id="cat_desc" name="cat_desc" value=""&gt;
  
          &lt;input type="Submit" id="save_first_prod" name="save_first_prod"  value=" + ADD"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It works perfectly in HTML. But it doesn't when using strings. I have made some changes to my javascript by the way, trying to resolve my problem</p>