Rails truncate with a 'read more' toggle

问题:

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.

回答1:

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>

回答2:

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...