Read more/less

read-more.css.sass

.expandable
  .read-more, .read-less
    // link styles go here (if needed)...
  .long-content
    display: none

read-more.js

jQuery(document).ready(function($, document){
  $('body').on("click", ".expandable .read-more, .expandable .read-less", function(event) {
    event.preventDefault();
    $(event.currentTarget).closest(".expandable").find(".short-content, .long-content").toggle()
  });
});

read_more_helper.rb

module ReadMoreHelper

  def read_more(text_or_safe_html, length: 250, more_text: 'Read more', less_text: 'Read less', omission: '…')
    content_tag :div, class: "expandable" do
      stripped_text = strip_tags(text_or_safe_html)
      if (stripped_text.length > length)
        concat content_tag(:div, read_more_short_content(text_or_safe_html, length, more_text, omission), class: "short-content")
        concat content_tag :div, read_more_long_content(text_or_safe_html, less_text), class: "long-content"
      else
        concat text_or_safe_html.html_safe
      end
    end
  end

  def read_more_short_content(text_or_html, length, more_text, omission)
    (truncate(strip_tags(text_or_html), length: length, omission: omission) + " " + link_to(more_text, "javascript:;", class: "read-more", data: {ga_event: "read_more"})).html_safe
  end

  def read_more_long_content(text_or_html, less_text)
    (text_or_html + " " + link_to(less_text, "javascript:;", class: "read-less")).html_safe
  end

end