jQuery - Variable text length. How to get back to original HTML once it's trimmed?

Question

What do I need to accomplish?

Clicking on "Limit to 10 words" text in .box divs should be limited to approx. 10 words.

Clicking on "Display all words" all text in .box divs should displayed.

I'm able to limit text length, but I cannot switch it back to original state.

HTML:

<a href="#" id="limit">Limit to 10 words</a> | <a href="#" id="nolimit">Display all words</a>
<div class="box">
  <p>
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>

JS:

$('#nolimit').click(function(e) {
    e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    s = $.trim(s);
    $(this).html(s);
  });
});

$('#limit').click(function(e) {
    e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    s = $.trim(s);
    tenWords = s.split(' ').slice(0,10).join(' ');
    $(this).html(tenWords);
  });
});

JSFIDDLE: https://jsfiddle.net/rvjnb7ed/

Answer 1

When trying to "reset" the original HTML you're doing nothing but getting an already altered HTML.

Instead, when shrinking, store the original HTML into a data-* attribute.
When resetting, pull the original HTML back from the element's data

jsFiddle demo

$('#nolimit').click(function(e) {
  e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).data("html");   // Retrieve original
    $(this).html(s);
  });
});

$('#limit').click(function(e) {
  e.preventDefault();
  $('div.box').each(function() {
    var s = $(this).html();
    $(this).data("html", s);       // Store for later use
    var s = $.trim(s);
    var tenWords = s.split(' ').slice(0,10).join(' ');
    $(this).html(tenWords);
  });
});

---

Here's just a code remake (does the same)

$('div.box').html(function(i, v) {
  $(this).attr("data-html", v); // Store
});

$('#limit, #nolimit').click(function(e) {
  e.preventDefault();
  var limit = this.id == "limit";
  $('div.box').html(function(i,v) {
    return limit ? $.trim(v).split(' ').slice(0,10).join(' ') : this.dataset.html;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="limit">Limit to 10 words</a> | <a href="#" id="nolimit">Display all words</a>
<div class="box">
  <p>
    1. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. Donec eget dolor ut massa rutrum tempus. Proin id velit porttitor, ultricies magna et, ultrices est.
  </p>
</div>
<div class="box">
  <p>
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nisl a leo laoreet tempor. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. 
  </p>
</div>
<div class="box">
  <p>
    3. Sed eget augue at lorem consectetur venenatis vestibulum nec sapien. Suspendisse accumsan dolor eu scelerisque condimentum. Vivamus velit diam, viverra sit amet blandit vitae, viverra eget ligula. In ut neque eu urna suscipit venenatis mattis vel urna. 
  </p>
</div>