title: show more/Less text with just HTML and JavaScript
body: <p>I am needing to create a show more/less text function, but with just JavaScript and HTML.. I can't use any additional libraries such as jQuery and it can't be done with CSS. The sample code I have added displays the 'more' text, but not the 'less'.</p>
  
  <p>If someone could point me in the right direction, it would be much appreciated.</p>
  
  <p>I've spent the majority of the day frying my brain over this, as its clearly not the modern way to do it, however, my HTML is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="moreless.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  Lorem ipsum dolor sit amet
  &lt;p&gt;
  
  &lt;p id="textarea"&gt;&lt;!-- This is where I want to additional text--&gt;&lt;/div&gt;
  &lt;/p&gt;
  
  &lt;a onclick="showtext('text')" href="javascript:void(0);"&gt;See More&lt;/a&gt;
  &lt;p&gt;
  Here is some more text 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my JavaScript is (moreless.js):</p>
  
  <pre><code>function showtext()
  {
  var text="Here is some text that I want added to the HTML file";
  document.getElementById("textarea").innerHTML=text;
  }
  </code></pre>