title: How to hide paragraph and make visible with heading click using Javascript
body: <p>I have a question about Javascript. I want to set some paragraphs on my page to hidden when the page loads, then have the paragraphs accessed by clicking on the heading. This is the html:</p>
  
  <pre><code>&lt;div id="rightside"&gt;
      &lt;div id="story1"&gt;
          &lt;h3&gt;Spice Girls premiere new song&lt;/h3&gt;
          &lt;p class="news"&gt; 
              &lt;em&gt;Headlines (Friendship Never Ends)&lt;/em&gt; 
              is the first new single from the reformed girl band since 2000 and is the official Children In Need track for 2007.
          &lt;/p&gt;
          &lt;p class="news"&gt;
              Geri Halliwell, Victoria Beckham, Melanie Brown, Melanie Chisholm and Emma Bunton have regrouped to promote a new Spice Girls' greatest hits album and an upcoming world tour.  &lt;a href="#"&gt;more ...&lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the Javascript I have that isn't working:</p>
  
  <pre><code>function hideElementByVisible('news'){
      document.getElementsByClassName('news').style.visibility = "none";
  }
  
  function showElementByDisplay('news',prop){
      if(prop == "block"){
          getElementsByClassName('news').style.display = "block";
      }
      else if(prop == "inline"){
          getElementsByClassName('news').style.display = "inline";
      }
  }
  window.onload=hideElementByVisible;
  </code></pre>
  
  <p>I'm getting an error saying that an identifier is expected in the first line of the Javascript but I can't think what that could be. Help please?</p>