title: Could someone help me with the button in javascript displaying paragraphs
body: <p>i am trying to create a button that changes the paragraph from visible to invinsible and the opposite but i cannot get it to work. 
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p1 {
   
   display = none;
   
   }
  
  
  button {
   position:absolute;
   background-color: #8C6D09;
   color: white;
   padding: 16px 32px;
   display:inline-block;
   margin:4px 2px;
   -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s; 
   }
   
  button1{
   background-color:#8C6D09;
   color:#FFF;
   position:absolute;
   }
    
    p1 {
   
   display = none;
   
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
          &lt;div id="p1"&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;div&gt;
     
      &lt;script&gt;
   function toggle_visibility(id){
    var p = document.getElementById(id)
     if(p1.style.display == "block")
     p1.style.display = "none";
     else
     p1.style.display = "block";
    }
  
      
      &lt;/script&gt;
  &lt;button class="button button1"onclick="toggle_visibility"("p1")&gt;Easy&lt;/button&gt;
      &lt;/body&gt;
       &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>sorry for adding p1 in css twice it's actually only added once in the original code</p>