Javascript link vanishing after first click

Question

I 'm new to Javascript and I am trying to build something relatively simple.

I have an HTML file with the following div in it:

<p id="textArea" class = "more">
    <!-- random_text -->
</p>

What I want to do is make a Javascript function which takes the text inside this div, splits it into words and shows only as many words as I choose. Also I want to add a "see more" link at the end of the shortened text, which I will be able to click in order to toggle between the full and the shortened version of the text.

My function looks like this:

function expandContent() 
{      
    var showChar = 30;
    var ellipsesText = "...";
    var moreText = "(read more)";
    var lessText = "(read less)";

    $('.more').each(function() 
    {
      var $this = $(this);
      var fullText = $this.text().split(" ");

      if (fullText.length > showChar) {
        var shortText = fullText.slice(0, showChar);
        shortText.push('...');
        shortText = shortText.join(separator=' ');

       $this.data("full", fullText.join(separator=' '))
           .stop()
           .data("state", "shortState")
           .stop()
           .data("short", shortText)
           .stop()
           .html(shortText);

         $('<a />', {
            class: 'record-brief-more-link',
            text: moreText,
            href: '#'
         }).appendTo($this);
      } 

    });

    $(".record-brief-more-link").on('click', function()
    {
      var $text = $(this).closest('.more');
      var state = $text.data("state");
      var linkText = (state == "shortState") ?  lessText : moreText;
      $(this).text(linkText);

      $text.html($text.data((state == "shortState") ? "full" : "short")); 

      $text.data("state", (state == "shortState") ? "fullState" : "shortState");

    });};

The problem is that after I click the link once, I get the full text as expected, but the link is no longer visible, so I can't change back to the shortened text if I want to. Does anyone have any idea why this is happening ?

Answer 1

When you respond to the click, you end up calling:

$text.html($text.data((state == "shortState") ? "full" : "short")); 

Which replaces all of the contents of the containing .more element, including the a tag you added earlier.

Your best bet would be to detach the link before resetting the contents, then re-append it afterwards:

var $link = $(this);
var $text = $link.closest('.more');
var state = $text.data("state");
var linkText = (state == "shortState") ?  lessText : moreText;
$link.text(linkText).detach();

$text.html($text.data((state == "shortState") ? "full" : "short")); 
$text.append($link);

function expandContent() {
  var showChar = 30;
  var ellipsesText = "...";
  var moreText = "(read more)";
  var lessText = "(read less)";

  $('.more').each(function() {
    var $this = $(this);
    var fullText = $this.text().split(" ");

    if (fullText.length > showChar) {
      var shortText = fullText.slice(0, showChar);
      shortText.push('...');
      shortText = shortText.join(separator = ' ');

      $this.data("full", fullText.join(separator = ' '))
        .stop()
        .data("state", "shortState")
        .stop()
        .data("short", shortText)
        .stop()
        .html(shortText);

      $('<a />', {
        class: 'record-brief-more-link',
        text: moreText,
        href: '#'
      }).appendTo($this);
    }

  });

  $(".record-brief-more-link").on('click', function() {
    var $link = $(this);
    var $text = $link.closest('.more');
    var state = $text.data("state");
    var linkText = (state == "shortState") ? lessText : moreText;
    $link.text(linkText).detach();

    $text.html($text.data((state == "shortState") ? "full" : "short"));
    $text.append($link);

    $text.data("state", (state == "shortState") ? "fullState" : "shortState");

  });
};

expandContent();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="textArea" class="more">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>