title: Toggling .sliced off text with jQuery
body: <p>I want to toggle the text that is hidden after the <code>.slice</code> slices off the first 100 characters.</p>
  
  <p>I have the following code: </p>
  
  <p><strong>.html</strong></p>
  
  <pre><code>  &lt;div class="col-sm-12"&gt;
      &lt;p class="pdp-product-description"&gt;This has more than 100 characters and it is showing that it is sliced after the 100th&lt;/p&gt;
      &lt;a href="#"&gt;&lt;span class="view-details"&gt;View Details&lt;/span&gt;&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>.js</strong></p>
  
  <pre><code>$(function() {
      var hiddenDescription = $('p.pdp-product-description');
  
      hiddenDescription.each(function(){
          var t = $(this).text();
          if(t.length &lt; 100) return;
          $(this).html(
              t.slice(0,100)+'&lt;span&gt;... &lt;/span&gt;'+
              '&lt;span class="hidden"&gt;'+ t.slice(100,t.length)+'&lt;/span&gt;'
          );
      });
  
      $('.view-details').click(function() {
        $('.pdp-product-description').toggleClass('.hidden');
      });
  });
  </code></pre>
  
  <p>The current setup doesn't seem to be working, any ideas?</p>