title: How to hide/show text with Javascript - link behavior
body: <p>I have just started learning JavaScript and I need some help. 
  I have got an HTML file and a CSS file in which I am NOT to make any changes. 
  With Javascript I have to add 2 links which will hide and show the paragraphs with class "show" .<br>
  When you open the HTML file in your browser , the paragraphs in question should be hidden. </p>
  
  <p>I ve read almost everything that is written here about the hide/show text methods but I still can't solve the problem and I cant seem to get my links to work properly. </p>
  
  <p>This is what I've got so far in my JavaScript code:</p>
  
  <pre><code>window.onload = function(){
  var par = document.getElementsByTagName("p");
  var parArray = [];
  
  
  for (var i=0 ; i &lt; par.length; i++) {
      if (par[i].getAttribute("class") === "show") {
          parArray.push(par[i]);
          par[i].style.display = "none";
          }  
      }
  
      console.log(par);
      console.log(parArray);
  
  for (i=0 ; i&lt;parArray.length; i++) {
      var a = document.createElement('a');
      var linkText = document.createTextNode("Show more information");
      a.appendChild(linkText);
      a.title = "Show more information";
      a.href = "#";   
      parArray[i].parentNode.appendChild(a);  
  }
  }
  </code></pre>
  
  <p>I want to make a function which will add the proper behavior to my links (show the text and change the link text to hide OR hide the text and change the link text to show) and then use the onclick event handler to call the function. </p>
  
  <p>Here is my html code as well:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Javascript Hidden textarea&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="content"&gt;
          &lt;div class="post"&gt;
                  &lt;h3&gt;
                      Title
                  &lt;/h3&gt;
                  &lt;p class="author"&gt;
                       paragraph One
                  &lt;/p&gt;        
              &lt;aside&gt;
                  JavaScript
              &lt;/aside&gt;
                  &lt;p&gt;
                      paragraph two
                  &lt;/p&gt;
                  &lt;p class="show"&gt;
                      ...We must hide this paragraph.
                  &lt;/p&gt;    
          &lt;/div&gt;
          &lt;div class="post"&gt;
                  &lt;h3&gt;
                      Title
                  &lt;/h3&gt;
                  &lt;p class="author"&gt;
                       paragraph One
                  &lt;/p&gt;        
              &lt;aside&gt;
                  JavaScript
              &lt;/aside&gt;
                  &lt;p&gt;
                      paragraph two
                  &lt;/p&gt;
                  &lt;p class="show"&gt;
                      ...We must hide this paragraph.
                  &lt;/p&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="hidetext.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>THANK YOU in advance!</p>