1. Change line #14 from
'</span>'
to
'<a href="#" class="read-less"> read less...</a></span>'

2. Insert before line #28 another click handler for the collapsing link:

  $('a.read-less').click(function() {
            $(this).parent().fadeOut().prev('a.read-more').show();
            return false;
        });

I wanted to limit the text shown to 150 characters so I cut off all text past that point.
The problem is that image links or other formatting might fall in the 150-151 character mark.
<img src=”images/smi This could be a result and really mess things up.

I appreciate your response! Other than that use, this makes for an awesome FAQ script!

http://www.w3schools.com/browsers/browsers_stats.asp

I’d approach this differently if I wanted to provide a link to another file for non-JS users. I’d probably just put the link where I wanted it to be and then remove it with JS and let the plugin take over. I’d have to know exactly where I wanted the “details” to start and wrap them up in a span that is hidden with CSS unless JS is enabled. But if I’m doing all this stuff manually, it sort of obviates the need for the plugin.

By the way, I’m curious about your statement about ” 5-8% who have javascript turned off.” Do you have a reference/URL for that figure? I’m always very interested in seeing such data and seeing how it is collected.

Thanks!

How might one construct this so it degrades gracefully in the browsers of that 5-8% who have javascript turned off? I notice when javascript is turned off, the whole of the text block is revealed. Ideally, for those users I’d rather a plain <noscript> html link to the complete text. Suggestions on how this might gracefully be achieved?