title: Uncaught SyntaxError: Unexpected identifier when using getElementById to read click event
body: <p>I am using the accordion function of Twitter Bootstrap to display more or less text for a certain field in my database called "description".  </p>
  
  <p>I am receiving the javascript error: Uncaught SyntaxError: Unexpected identifier </p>
  
  <p>Here is the php/html:</p>
  
  <pre><code>&lt;span class="description_text"&gt;{{ substr($artist-&gt;description,0,100) }}&lt;/span&gt;
          &lt;a id="more" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" style="display:block;"&gt;See More...&lt;/a&gt;
          &lt;span id="collapseOne" class="accordion-body collapse"&gt;&lt;span class="description_text"&gt;{{substr($artist-&gt;description,101)}}&lt;/span&gt;&lt;/span&gt;
          &lt;a id="less" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" style="display:none;"&gt;...See Less&lt;/a&gt;
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <pre><code>document.getElementById("more").addEventListener('click',function() {
  
      document.getElementById('less').style.display = "block";  
  
      document.getElementById('more').style.display = "none";    
  }
  
  document.getElementById("less").addEventListener('click',function() {
  
      document.getElementById('more').style.display = "block";   
  
      document.getElementById('less').style.display = "none";   
  }
  </code></pre>
  
  <p>The idea is I want the remainder of the description field to appear when clicking the "See More" link, then having the "See More" link disappear and have the "See Less" link appear.  When clicking see less, I would like the text to go away and then have the "see more" link appear again.</p>
  
  <p>Right now, I am receiving the error above, and the "see less" button isn't appearing when the text "expands".  I am coding this using Laravel 4.  </p>