Rails truncate with a 'read more' toggle

Question

I have a paragraph that I want truncated with the option of clicking "read more" and have it slide open with the rest of the content. The content is coming from a database field. Here's what I have for the truncate:

<%= truncate(@major.glance, :length => 250, :omission => '... Read More')%>

I can't seem to find a way to do this with data pulled from a database. I see a lot of examples using the full text with the text you want to hide in a separate div tag. But, since this content is coming from a database and is dynamic I can't find any information on how to do it.

This was a simple answer that worked for me. http://stackoverflow.com/a/26854494/5551783 — dgreen22, Jun 08 '16 at 15:36

jvnill · Accepted Answer · 2014-10-28T13:47:23.457

You can try the following

<div>
  <% if @major.glance.length > 250 %>
    <%= link_to_function truncate(@major.glance, length: 250), "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
</div>

or if you prefer to use the Read more link

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to_function '...Read more', "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

UPDATE

Since in Rails 4, link_to_function is deprecated and it is advisable to have non obstrusive js, use the following

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to '...Read more', '', class: "read-more-#{@major.id}" %>
    <script>
      $('.read-more-<%= @major.id %>').on('click', function(e) {
        e.preventDefault()
        $(this).parent().html('<%= escape_javascript @major.glance %>')
      })
    </script>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

just a followup that the reason why you can't use the `omission` option as a link is because the truncate method includes this in the count of characters. You can use it but you have to add some logic in the calculation of the number of characters you want to truncate. — jvnill, Mar 07 '13 at 03:43
you can change the js part so it changes the content of the parent again. or add 2 divs, one with the truncated part, the other with the untruncated then just toggle the div. — jvnill, Mar 10 '13 at 01:01
just change this part `"$(this).parent().html('#{escape_javascript @major.glance}')"` to the MooTools equivalent and you're set. — jvnill, Jun 03 '14 at 00:32

score 5 · Answer 2 · answered Oct 06 '14 at 01:01

I know I am joining this conversation a bit late. I have been tackling the same issue, trying the solution above, which works just fine. However, SEO wise content that has been hidden wasn't indexed by search engines. I checked in Lynx too and the link can not be followed (obviously). So settled for the this solution by Jed Foster | readmore.js - lynx can read it properly and now I am waiting for the SE index to update and see if I can find myself in the search results. Just in case someone is in a similar situation...

Thanks for letting me know about readmore.js this is exactly the type of thing I was trying to do. This looks great. Thanks for sharing! — lflores, Oct 16 '14 at 16:23

Rails truncate with a 'read more' toggle

2 Answers2

Linked