Drupal readmore toggle

readmore.js

/**
 * @file
 * A JavaScript file for the theme.
 *
 * Add a read more / less functionality.
 */

(function ($, Drupal, window, document) {

  'use strict';

  // To understand behaviors, see https://drupal.org/node/756722#behaviors
  Drupal.behaviors.read_more_less = {
    attach: function (context, settings) {

      // Place your code here.
      if (!($('.more').is(':empty'))){

        var moreText = "Read more",
            lessText = "Read less";


        $('.top').after( "<a class='js-readmore' href='#'>" + moreText + "</a>" );
        var moreButton = $(".js-readmore");
        $('.more').hide();

        moreButton.click(function(e){
          var $this = $(this);
          $this.text($this.text() == moreText ? lessText : moreText).next(".more").slideToggle("fast");
          e.preventDefault();
        });
      }
    }
  };

})(jQuery, Drupal, this, this.document);

template.php

<?php

function THEMENAME_preprocess_field(&$variables, $hook) {
  $element = &$variables['element'];
  if ($element['#field_name'] == 'body' && $element['#bundle'] == 'article') {

    $whole = $element['#object']->body[LANGUAGE_NONE][0]['safe_value'];
    $parts = explode('<!--break-->', $whole, 2);
    // dpr($parts);

    $variables['items']['0']['#markup'] = '<div class="top">' . $parts[0] . '</div>';
    $variables['items']['0']['#markup'] .= '<div class="more">' . $parts[1] . '</div>';

  }
}