Truncate text on screen resize/mobile with ability to expand text

429
November 23, 2016, at 8:40 PM

I have a fiddle located here, https://jsfiddle.net/patricksharer/g43t1bnh/3/ where I have been trying to use the trunk8 jquery plugin to shrink a section of text on my page when viewed on mobile. I have the truncation working fine but when you click the ..red more link to try and expand the text, nothing happens. Can someone take a look at my code to see what I have done wrong?

The section in which I am trying to truncate is in,

<div class="grid-100 mobile-grid-100 main-photo-description">
     <p class="t8-toggle">Here's a couple of SHJ's cars at the Penske race shop in NC. This photo was taken while on tour with www.GaragePassShopTours.com</p>
</div>

Thanks as always you beautiful Stackoverflow people!

Answer 1

The issue is with using live since it was deprecated as of 1.7. Adjust to a click function like:

$('#read-more').click(function (event) {
   $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
   return false;
});

Or use on like:

$('#read-more').on('click', function (event) {
   $(this).parent().trunk8('revert').append(' <a id="read-less" href="#">read less</a>');
   return false;
});

Update for the read-less:

$(document).on('click', '#read-less', function (event) {
     $(this).parent().trunk8(); 
     return false;
});
Answer 2

I'm actually the creator of trunk8 so I feel obligated to find out what's going wrong.

It looks like you've copied the example from http://jrvis.com/trunk8/#toggle which was written for an older version of jQuery. The live method has been deprecated in favor of on. To confirm this, I kept your code exactly the same but changed the version of jQuery to something older than 1.9: https://jsfiddle.net/g43t1bnh/10/ and it works.

I've also updated my website to use on instead of live to prevent others from having this issue.

Here's a rewritten version that uses the event delegation compatible with jQuery 2.1.3: https://jsfiddle.net/g43t1bnh/8/

As others have noted, #read-less doesn't exist at the time of execution, so you need to bind the click event handler to some other ancestor element for the delegation to work. The document is used for this purpose. In my version linked above, I use delegation in both more/less bindings for consistency even though it's only necessary in the less case.

Answer 3

You are using the new version of jquery so the live function is not supported use on instead

$('#read-more').on('click')

but for the read-less button to work you have to change it to

$(document).on('click',"#read-less")

which is a common pattern for events to work on dynamically added elements.

Here is a working Example.

Rent Charter Buses Company
READ ALSO
Jquery skipping over elements in selector when element that doesn&#39;t match selector is added to ul

Jquery skipping over elements in selector when element that doesn't match selector is added to ul

I'm trying to write an autocomplete widget. The requirements call for a horizontal rule element dividing portions of the list.

259
Find similarities and differences in a variable set of javascript array of arrays.

Find similarities and differences in a variable set of javascript array of arrays.

I'm trying to make a sort of Venn Diagram and I have an array of arrays that stores the data that is in each unique set. So something like:.

368
DataTables AJAX search uses ambiguous columns

DataTables AJAX search uses ambiguous columns

The output for a particular DataTable had to use a LEFT JOIN on several tables to get the data needed. When I type anything into the search box for the DataTable, I'm given the error SQLSTATE[23000]: Integrity constraint violation: 1052 Column 'id' in where clause...

499
Confusion between objects and functions - JavaScript

Confusion between objects and functions - JavaScript

I'm new in JavaScript and I want to understand something, for example in jQuery we have the jQuery object (often called $), but I'm confused here:.

385