title: Expand/Collapse Text in HTML - Javascript
body: <p>I'm trying to get a 'See More' (expand) and 'See Less' (collapse) javascript code working. I will loop through and call this javascript code on each class instance in the HTML.</p>
  
  <p>This actually works for the first time it appears on the page. I put in Console.logs to see that it works correctly. i.e. each time I click 'See More' the console will print 'Expand/Collapse' once.</p>
  
  <p>However, each additional instance of the device (on another piece of text on the page), it won't expand at all.</p>
  
  <p>What happens is that in the second instance, the console prints - "Expand, Collapse". So it actually does both instantaneously (which means it doesn't expand at all).</p>
  
  <p>In the third, it prints - "Expand, Collapse, Expand, Collapse, Expand, Collapse". Almost like exponential growth... Any ideas?</p>
  
  <pre><code>function showMoreLess(element) {
  var showChar = 150;
  var ellipsestext = "...";
  var moretext = "See More";
  var lesstext = "See Less";
  var content = $(element).html();
  if (content.length &gt; showChar) {
      var show_content = content.substr(0, showChar);
      var hide_content = content.substr(showChar, content.length - showChar);
      var html = show_content 
                  + '&lt;span class="moreelipses"&gt;' 
                  + ellipsestext
                  + '&lt;/span&gt;&lt;span class="remaining-content"&gt;&lt;span&gt;' 
                  + hide_content + '&lt;/span&gt;&amp;nbsp;&amp;nbsp;&lt;a href="" class="morelink"&gt;' 
                  + moretext 
                  + '&lt;/a&gt;&lt;/span&gt;';
      $(element).html(html);
  }
  
  $(".morelink").click(function () {
      if ($(this).hasClass("less")) {
          $(this).removeClass("less");
          $(this).html("See More");
          console.log("Collapse") // "Collapse" appears in console
      } else {
          $(this).addClass("less");
          $(this).html("See Less");
          console.log("Expand") // "Expand" appears in console
      }
      $(this).parent().prev().toggle();
      $(this).prev().toggle();
  
      return false;
  });
  </code></pre>
  
  <p>}</p>
  
  <p>This is the JQuery code that loops through each class:</p>
  
  <pre><code>$(function () {
      $.each($(".limitedTextSpace"), function(index, value) {
          showMoreLess(value);
      });
  });
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>I followed Roberto Linares' format and recreated the function like so:</p>
  
  <pre><code>function showMoreLess(element) {
  var showChar = 150;
  var ellipsestext = "...";
  var moretext = "See More";
  var lesstext = "See Less";
  var content = $(element).html();
  if (content.length &gt; showChar) {
      var show_content = content.substr(0, showChar);
      var hide_content = content.substr(showChar, content.length - showChar);
      var html = '&lt;span class="collapsed"&gt;' + show_content 
                  + ellipsestext
                  + '&lt;/span&gt;&lt;span class="expanded"&gt;'
                  + content
                  + '&lt;/span&gt;&lt;a href="javascript:void(0)" class="collapsed"&gt;'
                  + moretext
                  + '&lt;/a&gt;&lt;a href="javascript:void(0)" class="expanded"&gt;' 
                  + lesstext
                  + '&lt;/a&gt;'
      $(element).html(html);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Then I made slight changes to the other looping function as well:</p>
  
  <pre><code>    $(function () {
      $.each($(".limitedTextSpace"), function(index, value) {
          showMoreLess(value);
      });
  
      $(".expanded").hide();
      $(".expanded, .collapsed").click(function() {
          $(this).parent().children(".expanded, .collapsed").toggle();
      });
  });
  </code></pre>
  
  <p>However, now there is the issue with when there are breaks in the text. The code interprets each paragraph of the same text as a different expand/collapse instances - meaning instead of one expand/collapse for a block of text, there is multiple for each paragraph.</p>