it-swarm.com.de

Fügen Sie mehr als einen Link "Lesen Sie mehr" in einem Absatz hinzu (readmore.js)

Ich benutze readmore.js und möchte meinen Absatz zweimal erweitern. 

Im Moment verwende ich einen Erweiterungslink mit dem Wert "Weitere Informationen", der den gesamten Text anzeigt, wenn Sie darauf klicken. 

Am unteren Rand befindet sich ein weiterer Link mit dem Wert "Weniger Informationen", der den Text beim Klicken verbirgt:

This is some text and continues for ages...
<a href="#">More information</a>

This is some text and continues for ages...
but is not as long as you think.
<a href="#">Less information</a>

Ich möchte einen weiteren Erweiterungslink mit dem Titel "Noch mehr Informationen" hinzufügen. In dieser Situation würde "Weitere Informationen" nur einen Teil des Textes anzeigen, während "Noch mehr Informationen" den gesamten Text anzeigen würde. Das würde ungefähr so ​​aussehen:

This is some text and continues for ages...
<a href="#">More information</a>

This is some text and continues for ages...
and it goes on and on and on...
<a href="#">Even more information</a>

This is some text and continues for ages...
and it goes on and on and on...
but not as long as you think.
<a href="#">Less information</a>

Dieses Snippet zeigt meine aktuelle Situation:

$('.example').readmore({
  collapsedHeight: 300,
  speed: 500,
  embedCSS: false,
  moreLink: '<a href="#">More information</a>',
  lessLink: '<a href="#">Less information</a>',
  beforeToggle: function(trigger, element, expanded) {
    if (expanded === false) {
      element.addClass('remove-after');
    } else {
      element.removeClass('remove-after');
    }
  }
});
.example+[data-readmore-toggle],
.example[data-readmore] {
  display: block;
}

.example[data-readmore]::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
  bottom: 0;
  content: '';
  display: inline-block;
  height: 250px;
  position: absolute;
  right: 0;
  width: 100%;
}

.remove-after::after {
  display: none !important;
}

[data-readmore-toggle] {
  margin-left: 15px;
}

img {
  float: right;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/readmore.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="example col-md-12">
  <p>They say everything looks better with odd numbers of things. But sometimes I put even numbers—just to upset the critics. Don't be afraid to make these big decisions. Once you start, they sort of just make themselves. Now let's put some happy little
    clouds in here. We can always carry this a step further. There's really no end to this. Think about a cloud. Just float around and be there. We want to use a lot pressure while using no pressure at all.</p>

  <p>Look around, look at what we have. Beauty is everywhere, you only have to look to see it. That's the way I look when I get home late; black and blue. All you have to do is let your imagination go wild. We have a fantastic little sky!</p>

  <p>All kinds of happy little splashes. We don't want to set these clouds on fire. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. It looks so good, I might as well not stop. We need dark
    in order to show light. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself.</p>

  <img src="https://dummyimage.com/200x200/2d5cc2/fff" />

  <p>Van Dyke Brown is a very Nice brown, it's almost like a chocolate brown. We're trying to teach you a technique here and how to use it. This present moment is perfect simply due to the fact you're experiencing it.</p>

  <p>If what you're doing doesn't make you happy - you're doing the wrong thing. We spend so much of our life looking - but never seeing. In this world, everything can be happy. Everyone is going to see things differently - and that's the way it should be.
    And just raise cain.</p>

  <p>There's nothing wrong with having a tree as a friend. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. Tree trunks grow however makes them happy.</p>

  <p>Let your imagination be your guide. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. We wash our brush with odorless thinner. Every highlight needs it's own personal
    shadow. Don't kill all your dark areas - you need them to show the light. Working it up and down, back and forth.</p>

  <p>Don't forget to tell these special people in your life just how special they are to you. The only thing worse than yellow snow is green snow. That's why I Paint - because I can create the kind of world I want - and I can make this world as happy as
    I want it. Let's build an almighty mountain. You have to make almighty decisions when you're the creator.</p>

  <p>We have a fantastic little sky! Everybody's different. Trees are different. Let them all be individuals. Just go out and talk to a tree. Make friends with it. Go out on a limb - that's where the fruit is. There are no mistakes. You can fix anything
    that happens.</p>

  <p>You have to make those little noises or it won't work. We have no limits to our world. We're only limited by our imagination. I want everbody to be happy. That's what it's all about.</p>

  <p>Nice little clouds playing around in the sky. It's a super day, so why not make a beautiful sky? We spend so much of our life looking - but never seeing. The secret to doing anything is believing that you can do it. Anything that you believe you can
    do strong enough, you can do. Anything. As long as you believe. Everything's not great in life, but we can still find beauty in it.</p>

  <p>If you've been in Alaska less than a year you're a Cheechako. You don't have to be crazy to do this but it does help. I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue. And I will hypnotize
    that just a little bit. Nothing's gonna make your husband or wife madder than coming home and having a snow-covered dinner.</p>

  <p>There it is. Don't fiddle with it all day. No worries. No cares. Just float and wait for the wind to blow you around.</p>

  <p>All you need to Paint is a few tools, a little instruction, and a vision in your mind. Let's put a touch more of the magic here. Now let's put some happy little clouds in here. We'll lay all these little funky little things in there. But we're not there
    yet, so we don't need to worry about it. All you have to learn here is how to have fun.</p>
</div>

15
Hjsurk

Ich denke, der bessere Weg ist, das readmore.js-Plugin direkt zu modifizieren. Also habe ich einen Schritt und ein neues Label hinzugefügt:

$('article').readmore({
      speed: 500,
      collapsedHeight:200,
      collapsedMoreHeight: 400, // Always bigger than collapsedHeigh. There isn't any control to that. Be careful.
      moreLink: '<a class="white-shadow" href="#">More information</a>',
      evenMoreLink: '<a class="white-shadow" href="#">Even More informations</a>', // Add new label
      lessLink: '<a href="#">Less information</a>'
 });

Die größten Änderungen, die ich vorgenommen habe, sind folgende:

      var $element = $(element),
          newHeight = '',
          newLink = '',
          expanded = false,
          collapsedHeight = $element.data('collapsedHeight'),
          collapsedMoreHeight = this.options.collapsedMoreHeight; // add an Even More informations


      if ($element.data('expandedHeight') <= collapsedMoreHeight){
        //This is the normal code if the article's height is smaller than my new option

        if ($element.height() <= collapsedHeight) {
            newHeight = $element.data('expandedHeight') + 'px';
            newLink = 'lessLink';
            expanded = true;
        }
        else {
          newHeight = collapsedHeight;
          newLink = 'moreLink';
        }
      } else {

        //Here it works the new step: 'Even More informations'

        if ($element.height() <= collapsedHeight) {
            newHeight = collapsedMoreHeight;
            newLink   = 'evenMoreLink';
            expanded = false;
        } else if ($element.height() > collapsedHeight && $element.height() <= collapsedMoreHeight){
            newHeight = $element.data('expandedHeight') + 'px';
            newLink = 'lessLink';
            expanded = true;
        }
        else {
            newHeight = collapsedHeight;
            newLink = 'moreLink';
        }
      }

// This is the new Readmore.js file. Save this in external file.

/*!
 * @preserve
 *
 * Readmore.js jQuery plugin
 * Author: @jed_foster
 * Project home: http://jedfoster.github.io/Readmore.js
 * Licensed under the MIT license
 *
 * Debounce function from http://davidwalsh.name/javascript-debounce-function
 */

/* global jQuery */

(function(factory) {
  if (typeof define === 'function' && define.AMD) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {
  'use strict';

  var readmore = 'readmore',
      defaults = {
        speed: 100,
        collapsedHeight: 50,
        collapsedMoreHeight: 150, // add an Even More informations Height
        heightMargin: 16,
        moreLink:     '<a href="#">More informations</a>',
        evenMoreLink: '<a href="#">Even more informations</a>', // add new label
        lessLink:     '<a href="#">Close</a>',
        embedCSS: true,
        blockCSS: 'display: block; width: 100%;',
        startOpen: false,

        // callbacks
        blockProcessed: function() {},
        beforeToggle:   function() {},
        afterToggle:    function() {}
      },
      cssEmbedded = {},
      uniqueIdCounter = 0;

  function debounce(func, wait, immediate) {
    var timeout;

    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (! immediate) {
          func.apply(context, args);
        }
      };
      var callNow = immediate && !timeout;

      clearTimeout(timeout);
      timeout = setTimeout(later, wait);

      if (callNow) {
        func.apply(context, args);
      }
    };
  }

  function uniqueId(prefix) {
    var id = ++uniqueIdCounter;

    return String(prefix == null ? 'rmjs-' : prefix) + id;
  }

  function setBoxHeights(element) {
    var el = element.clone().css({
          height: 'auto',
          width: element.width(),
          maxHeight: 'none',
          overflow: 'hidden'
        }).insertAfter(element),
        expandedHeight = el.outerHeight(),
        cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
        defaultHeight = element.data('defaultHeight');

    el.remove();

    var collapsedHeight = cssMaxHeight || element.data('collapsedHeight') || defaultHeight;

    // Store our measurements.
    element.data({
      expandedHeight: expandedHeight,
      maxHeight: cssMaxHeight,
      collapsedHeight: collapsedHeight
    })
    // and disable any `max-height` property set in CSS
    .css({
      maxHeight: 'none'
    });
  }

  var resizeBoxes = debounce(function() {
    $('[data-readmore]').each(function() {
      var current = $(this),
          isExpanded = (current.attr('aria-expanded') === 'true');

      setBoxHeights(current);

      // Resize only if expanded

      if(isExpanded){
        current.css({
          height: current.data('expandedHeight')
        });
      }

    });
  }, 100);

  function embedCSS(options) {
    if (! cssEmbedded[options.selector]) {
      var styles = ' ';

      if (options.embedCSS && options.blockCSS !== '') {
        styles += options.selector + ' + [data-readmore-toggle], ' +
          options.selector + '[data-readmore]{' +
            options.blockCSS +
          '}';
      }

      // Include the transition CSS even if embedCSS is false
      styles += options.selector + '[data-readmore]{' +
        'transition: height ' + options.speed + 'ms;' +
        'overflow: hidden;' +
      '}';

      (function(d, u) {
        var css = d.createElement('style');
        css.type = 'text/css';

        if (css.styleSheet) {
          css.styleSheet.cssText = u;
        }
        else {
          css.appendChild(d.createTextNode(u));
        }

        d.getElementsByTagName('head')[0].appendChild(css);
      }(document, styles));

      cssEmbedded[options.selector] = true;
    }
  }

  function Readmore(element, options) {
    this.element = element;

    this.options = $.extend({}, defaults, options);

    embedCSS(this.options);

    this._defaults = defaults;
    this._name = readmore;

    this.init();

    // IE8 chokes on `window.addEventListener`, so need to test for support.
    if (window.addEventListener) {
      // Need to resize boxes when the page has fully loaded.
      window.addEventListener('load', resizeBoxes);
      window.addEventListener('resize', resizeBoxes);
    }
    else {
      window.attachEvent('load', resizeBoxes);
      window.attachEvent('resize', resizeBoxes);
    }
  }


  Readmore.prototype = {
    init: function() {
      var current = $(this.element);

      current.data({
        defaultHeight: this.options.collapsedHeight,
        heightMargin: this.options.heightMargin
      });

      setBoxHeights(current);

      var collapsedHeight = current.data('collapsedHeight'),
          heightMargin = current.data('heightMargin');

      if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
        // The block is shorter than the limit, so there's no need to truncate it.
        if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
          this.options.blockProcessed(current, false);
        }
        return true;
      }
      else {
        var id = current.attr('id') || uniqueId(),
            useLink = this.options.startOpen ? this.options.lessLink : this.options.moreLink;

        current.attr({
          'data-readmore': '',
          'aria-expanded': this.options.startOpen,
          'id': id
        });

        current.after($(useLink)
          .on('click', (function(_this) {
            return function(event) {
              _this.toggle(this, current[0], event);
            };
          })(this))
          .attr({
            'data-readmore-toggle': id,
            'aria-controls': id
          }));

        if (! this.options.startOpen) {
          current.css({
            height: collapsedHeight
          });
        }

        if (this.options.blockProcessed && typeof this.options.blockProcessed === 'function') {
          this.options.blockProcessed(current, true);
        }
      }
    },

    toggle: function(trigger, element, event) {
      if (event) {
        event.preventDefault();
      }

      if (! trigger) {
        trigger = $('[aria-controls="' + this.element.id + '"]')[0];
      }

      if (! element) {
        element = this.element;
      }

      /////////////////////////
      // I changed this part //
      /////////////////////////

      var $element = $(element),
          newHeight = '',
          newLink = '',
          expanded = false,
          collapsedHeight = $element.data('collapsedHeight'),
          collapsedMoreHeight = this.options.collapsedMoreHeight; // add an Even More informations

      
      if ($element.data('expandedHeight') <= collapsedMoreHeight){
        //This is the normal code if the article's height is smaller than my new option

        if ($element.height() <= collapsedHeight) {
            newHeight = $element.data('expandedHeight') + 'px';
            newLink = 'lessLink';
            expanded = true;
        }
        else {
          newHeight = collapsedHeight;
          newLink = 'moreLink';
        }
      } else {

        //Here it works the new step: 'Even More informations'

        if ($element.height() <= collapsedHeight) {
            newHeight = collapsedMoreHeight;
            newLink   = 'evenMoreLink';
            expanded = false;
        } else if ($element.height() > collapsedHeight && $element.height() <= collapsedMoreHeight){
            newHeight = $element.data('expandedHeight') + 'px';
            newLink = 'lessLink';
            expanded = true;
        }
        else {
            newHeight = collapsedHeight;
            newLink = 'moreLink';
        }
      }

      ////////////////
      // End change //
      ////////////////


      // Fire beforeToggle callback
      // Since we determined the new "expanded" state above we're now out of sync
      // with our true current state, so we need to flip the value of `expanded`
      if (this.options.beforeToggle && typeof this.options.beforeToggle === 'function') {
        this.options.beforeToggle(trigger, $element, ! expanded);
      }

      $element.css({'height': newHeight});

      // Fire afterToggle callback
      $element.on('transitionend', (function(_this) {
        return function() {
          if (_this.options.afterToggle && typeof _this.options.afterToggle === 'function') {
            _this.options.afterToggle(trigger, $element, expanded);
          }

          $(this).attr({
            'aria-expanded': expanded
          }).off('transitionend');
        }
      })(this));

      $(trigger).replaceWith($(this.options[newLink])
        .on('click', (function(_this) {
            return function(event) {
              _this.toggle(this, element, event);
            };
          })(this))
        .attr({
          'data-readmore-toggle': $element.attr('id'),
          'aria-controls': $element.attr('id')
        }));
    },

    destroy: function() {
      $(this.element).each(function() {
        var current = $(this);

        current.attr({
          'data-readmore': null,
          'aria-expanded': null
        })
          .css({
            maxHeight: '',
            height: ''
          })
          .next('[data-readmore-toggle]')
          .remove();

        current.removeData();
      });
    }
  };


  $.fn.readmore = function(options) {
    var args = arguments,
        selector = this.selector;

    options = options || {};

    if (typeof options === 'object') {
      return this.each(function() {
        if ($.data(this, 'plugin_' + readmore)) {
          var instance = $.data(this, 'plugin_' + readmore);
          instance.destroy.apply(instance);
        }

        options.selector = selector;

        $.data(this, 'plugin_' + readmore, new Readmore(this, options));
      });
    }
    else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
      return this.each(function () {
        var instance = $.data(this, 'plugin_' + readmore);
        if (instance instanceof Readmore && typeof instance[options] === 'function') {
          instance[options].apply(instance, Array.prototype.slice.call(args, 1));
        }
      });
    }
  };

}));




// Init plugin


    $('article').readmore({
  speed: 500,
  collapsedHeight:200,
  collapsedMoreHeight: 400, // This is your new second height. Always bigger than collapsedHeigh. There isn't any control to that. Be careful.
  moreLink: '<a class="white-shadow" href="#">More information</a>',
  evenMoreLink: '<a class="white-shadow" href="#">Even More informations</a>', // Add new label
  lessLink: '<a href="#">Less information</a>'
});
 body { font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #444; }
    code { color: #777; font-family: "Source Code Pro", "Menlo", "Courier New", monospace;}
    a { color: #178DB1; }
    .container { margin: 0 auto; max-width: 960px; }
    #info + .readmore-js-toggle { padding-bottom: 1.5em; border-bottom: 1px solid #999; font-weight: bold;}
.white-shadow{
      position:relative;
    }

    .white-shadow:after{
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
      bottom: 100%;
      content: '';
      display: inline-block;
      height: 150px;
      position: absolute;
      right: 0;
      width: 100%;
    }


    #demo { padding: 0 10%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="container">
 <section id="demo">

      <article>
        <h2>Artisanal Narwahls</h2>

        <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and Explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>


        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
      </article>

      <article>
        <h2>Portland Leggings</h2>

        <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance</p>

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio neque, dapibus a tincidunt sed, molestie in diam. Quisque quis vulputate tellus. Nulla nisl mi, rhoncus et magna cursus, euismod vehicula erat. Integer fringilla urna orci, at tempor nisi suscipit ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non laoreet ex. Cras et purus augue. Donec a urna et leo malesuada laoreet. Duis tortor massa, fermentum et porta id, pharetra suscipit lorem. Donec molestie nunc nisi, sed faucibus turpis facilisis eget. Morbi eros mauris, fringilla in est a, vehicula tempus felis. Nullam sodales tincidunt turpis sed dapibus.</p>

        <p> Proin efficitur, leo ac sagittis faucibus, elit purus consectetur dolor, et scelerisque orci neque a orci. Nullam ut congue libero, in ornare mi. Quisque mattis porttitor nulla non fermentum. Suspendisse euismod facilisis magna, eget interdum leo semper sed. Nullam pretium, nisl sit amet auctor rhoncus, velit ipsum ullamcorper turpis, nec feugiat mauris diam ac lorem. Cras hendrerit non eros id ultricies. Aenean sed felis purus. Sed commodo, enim sed aliquet egestas, nisl odio porta ante, ac euismod justo turpis in mauris. Ut lobortis augue ut ex scelerisque, ut lacinia libero sollicitudin. Pellentesque vestibulum ac tellus sit amet commodo. Phasellus eu nunc nibh. In porta metus sed pharetra aliquet. Etiam eu magna id erat accumsan pellentesque pulvinar eget erat.</p>

        <p> Etiam vitae aliquam nisi. Aliquam vel suscipit felis. Donec non dapibus odio. Vivamus tincidunt mauris in tortor fermentum, a laoreet sem semper. Sed luctus vitae turpis vitae vulputate. Integer a libero orci. Morbi eu porttitor nisi, facilisis consectetur velit. Suspendisse sed facilisis velit. Proin rutrum ligula a purus mattis ullamcorper. Quisque sit amet aliquam enim. Etiam eleifend nibh velit, sit amet pulvinar est pulvinar eget. Fusce egestas ornare tellus sagittis pulvinar. Nulla aliquam magna id sem consectetur tristique. Nullam auctor vestibulum ex eget laoreet. Quisque interdum quam in nisi rhoncus rutrum. </p>
        
      </article>

      <article>
        <h2>This section is shorter than the Readmore minimum</h2>

        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
      </article>

      <article>
        <h2>Portland Leggings</h2>

        <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance</p>

        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio neque, dapibus a tincidunt sed, molestie in diam. Quisque quis vulputate tellus. Nulla nisl mi, rhoncus et magna cursus, euismod vehicula erat. Integer fringilla urna orci, at tempor nisi suscipit ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non laoreet ex. Cras et purus augue. Donec a urna et leo malesuada laoreet. Duis tortor massa, fermentum et porta id, pharetra suscipit lorem. Donec molestie nunc nisi, sed faucibus turpis facilisis eget. Morbi eros mauris, fringilla in est a, vehicula tempus felis. Nullam sodales tincidunt turpis sed dapibus.</p>

        <p> Proin efficitur, leo ac sagittis faucibus, elit purus consectetur dolor, et scelerisque orci neque a orci. Nullam ut congue libero, in ornare mi. Quisque mattis porttitor nulla non fermentum. Suspendisse euismod facilisis magna, eget interdum leo semper sed. Nullam pretium, nisl sit amet auctor rhoncus, velit ipsum ullamcorper turpis, nec feugiat mauris diam ac lorem. Cras hendrerit non eros id ultricies. Aenean sed felis purus. Sed commodo, enim sed aliquet egestas, nisl odio porta ante, ac euismod justo turpis in mauris. Ut lobortis augue ut ex scelerisque, ut lacinia libero sollicitudin. Pellentesque vestibulum ac tellus sit amet commodo. Phasellus eu nunc nibh. In porta metus sed pharetra aliquet. Etiam eu magna id erat accumsan pellentesque pulvinar eget erat.</p>

        <p> Etiam vitae aliquam nisi. Aliquam vel suscipit felis. Donec non dapibus odio. Vivamus tincidunt mauris in tortor fermentum, a laoreet sem semper. Sed luctus vitae turpis vitae vulputate. Integer a libero orci. Morbi eu porttitor nisi, facilisis consectetur velit. Suspendisse sed facilisis velit. Proin rutrum ligula a purus mattis ullamcorper. Quisque sit amet aliquam enim. Etiam eleifend nibh velit, sit amet pulvinar est pulvinar eget. Fusce egestas ornare tellus sagittis pulvinar. Nulla aliquam magna id sem consectetur tristique. Nullam auctor vestibulum ex eget laoreet. Quisque interdum quam in nisi rhoncus rutrum. </p>

        <p> Proin efficitur, leo ac sagittis faucibus, elit purus consectetur dolor, et scelerisque orci neque a orci. Nullam ut congue libero, in ornare mi. Quisque mattis porttitor nulla non fermentum. Suspendisse euismod facilisis magna, eget interdum leo semper sed. Nullam pretium, nisl sit amet auctor rhoncus, velit ipsum ullamcorper turpis, nec feugiat mauris diam ac lorem. Cras hendrerit non eros id ultricies. Aenean sed felis purus. Sed commodo, enim sed aliquet egestas, nisl odio porta ante, ac euismod justo turpis in mauris. Ut lobortis augue ut ex scelerisque, ut lacinia libero sollicitudin. Pellentesque vestibulum ac tellus sit amet commodo. Phasellus eu nunc nibh. In porta metus sed pharetra aliquet. Etiam eu magna id erat accumsan pellentesque pulvinar eget erat.</p>

        <p> Etiam vitae aliquam nisi. Aliquam vel suscipit felis. Donec non dapibus odio. Vivamus tincidunt mauris in tortor fermentum, a laoreet sem semper. Sed luctus vitae turpis vitae vulputate. Integer a libero orci. Morbi eu porttitor nisi, facilisis consectetur velit. Suspendisse sed facilisis velit. Proin rutrum ligula a purus mattis ullamcorper. Quisque sit amet aliquam enim. Etiam eleifend nibh velit, sit amet pulvinar est pulvinar eget. Fusce egestas ornare tellus sagittis pulvinar. Nulla aliquam magna id sem consectetur tristique. Nullam auctor vestibulum ex eget laoreet. Quisque interdum quam in nisi rhoncus rutrum. </p>
        
      </article>
    </section>
  </div>

EDIT 1 : Ich habe den Schaltflächen einen weißen Farbverlauf hinzugefügt, um sie dem Beispiel ähnlich zu machen. Ich habe es vergessen, sorry.

4
ReSedano

Fügen Sie dies Ihrem <head>-Tag hinzu:

<script type="text/javascript">
function moreInformation(){
    document.getElementById("more-information").style.display = "block";                    
}
function evenMoreInformation(){
    document.getElementById("even-more-information").style.display = "block";                   
}
function lessInformation(){
    document.getElementById("more-information").style.display = "none";                 
    document.getElementById("even-more-information").style.display = "none";                    
}
</script>

Und füge dies dem <body>-Tag hinzu:

This is some text and continues for ages...
<a onClick="moreInformation()" style="text-decoration:underline;cursor:pointer;">More information</a><br>
<br>
<div id="more-information" style="display:none">
This is some text and continues for ages...<br>
and it goes on and on and on...<br>
<a onClick="evenMoreInformation()" style="text-decoration:underline;cursor:pointer;">Even more information</a>
</div>
<br>
<div id="even-more-information" style="display:none">
This is some text and continues for ages...<br>
and it goes on and on and on...<br>
but not as long as you think.<br>
<a onClick="lessInformation()" style="text-decoration:underline;cursor:pointer;">Less information</a>
</div>

Ich hoffe du verstehst ...

3
user10105221
  1. Erstellen Sie eine Funktion mit Argumenten für collapsedHeight, moreLinkText, lessLinkText und andere erforderliche Konfigurationen.

    function invokeReadMore(collapsedHeight, moreTxt, lessTxt, ...) {
        //and make your call to $('.example').readMore 
        //with all the args received
    }
    
  2. Rufen Sie das zunächst mit Ihren ursprünglichen Anforderungen an (z. B. 300, Weitere Informationen ").

  3. Nun wie beforeToggle fügen Sie eine Funktion für afterToggle hinzu (wenn es sich um ein Targeting expand handelt) und rufen die Funktion invokeReadMore mit neuen Anforderungen auf (z. B. 350, "Noch mehr", "Weniger ..."). Außerdem können Sie einige Kennzeichen pflegen Sie befinden sich in der nächsten "Noch mehr" Ansicht

  4. Wenn nun Ihr Flag sagt, dass Sie sich in "noch mehr" befinden, dann in afterToggle (wenn es ein Targeting-Minimieren war) abgebrochen ist, dann rufen Sie die Funktion invokeReadMore erneut mit Ihren ursprünglichen Parametern auf

Hier (ich habe gerade JS von Ihrem Snippet bearbeitet) ist ein Arbeitsbeispiel

var isExpandMode = false;
 function invokeReadMore(collapsedHeight, speed, moreLinkTxt, lessLinkTxt) {
   $('.example').readmore({
    collapsedHeight: collapsedHeight,
    speed: speed,
    embedCSS: false,
    moreLink: '<a href="#">'+ moreLinkTxt +'</a>',
    lessLink: '<a href="#">'+ lessLinkTxt +'</a>',
    beforeToggle: function(trigger, element, expanded) {
      if (expanded === false) {
        element.addClass('remove-after');
      } else {
       
        element.removeClass('remove-after');
      }
    },
    afterToggle: function(trigger, element, expanded) { 
      if (expanded === false) {
        if(isExpandMode===true) {
          invokeReadMore(200, 1, 'More Information', 'Less Information')
          isExpandMode = false;
        }
      } else {
       if(isExpandMode===false) {
          invokeReadMore(300, 500, 'Even More Information', 'Less Information')
          isExpandMode = true;
        }
      }
    }
  });
 
 }
 
 invokeReadMore(200, 1, 'More Information', 'Less Information');
.example+[data-readmore-toggle],
.example[data-readmore] {
  display: block;
}

.example[data-readmore]::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
  bottom: 0;
  content: '';
  display: inline-block;
  height: 250px;
  position: absolute;
  right: 0;
  width: 100%;
}

.remove-after::after {
  display: none !important;
}

[data-readmore-toggle] {
  margin-left: 15px;
}

img {
  float: right;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/readmore.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="example col-md-12">
  <p>They say everything looks better with odd numbers of things. But sometimes I put even numbers—just to upset the critics. Don't be afraid to make these big decisions. Once you start, they sort of just make themselves. Now let's put some happy little
    clouds in here. We can always carry this a step further. There's really no end to this. Think about a cloud. Just float around and be there. We want to use a lot pressure while using no pressure at all.</p>

  <p>Look around, look at what we have. Beauty is everywhere, you only have to look to see it. That's the way I look when I get home late; black and blue. All you have to do is let your imagination go wild. We have a fantastic little sky!</p>

  <p>All kinds of happy little splashes. We don't want to set these clouds on fire. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. It looks so good, I might as well not stop. We need dark
    in order to show light. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself.</p>

  <img src="https://dummyimage.com/200x200/2d5cc2/fff" />

  <p>Van Dyke Brown is a very Nice brown, it's almost like a chocolate brown. We're trying to teach you a technique here and how to use it. This present moment is perfect simply due to the fact you're experiencing it.</p>

  <p>If what you're doing doesn't make you happy - you're doing the wrong thing. We spend so much of our life looking - but never seeing. In this world, everything can be happy. Everyone is going to see things differently - and that's the way it should be.
    And just raise cain.</p>

  <p>There's nothing wrong with having a tree as a friend. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. Tree trunks grow however makes them happy.</p>

  <p>Let your imagination be your guide. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. We wash our brush with odorless thinner. Every highlight needs it's own personal
    shadow. Don't kill all your dark areas - you need them to show the light. Working it up and down, back and forth.</p>

  <p>Don't forget to tell these special people in your life just how special they are to you. The only thing worse than yellow snow is green snow. That's why I Paint - because I can create the kind of world I want - and I can make this world as happy as
    I want it. Let's build an almighty mountain. You have to make almighty decisions when you're the creator.</p>

  <p>We have a fantastic little sky! Everybody's different. Trees are different. Let them all be individuals. Just go out and talk to a tree. Make friends with it. Go out on a limb - that's where the fruit is. There are no mistakes. You can fix anything
    that happens.</p>

  <p>You have to make those little noises or it won't work. We have no limits to our world. We're only limited by our imagination. I want everbody to be happy. That's what it's all about.</p>

  <p>Nice little clouds playing around in the sky. It's a super day, so why not make a beautiful sky? We spend so much of our life looking - but never seeing. The secret to doing anything is believing that you can do it. Anything that you believe you can
    do strong enough, you can do. Anything. As long as you believe. Everything's not great in life, but we can still find beauty in it.</p>

  <p>If you've been in Alaska less than a year you're a Cheechako. You don't have to be crazy to do this but it does help. I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue. And I will hypnotize
    that just a little bit. Nothing's gonna make your husband or wife madder than coming home and having a snow-covered dinner.</p>

  <p>There it is. Don't fiddle with it all day. No worries. No cares. Just float and wait for the wind to blow you around.</p>

  <p>All you need to Paint is a few tools, a little instruction, and a vision in your mind. Let's put a touch more of the magic here. Now let's put some happy little clouds in here. We'll lay all these little funky little things in there. But we're not there
    yet, so we don't need to worry about it. All you have to learn here is how to have fun.</p>
</div>

1

Fügen Sie einfach <br>-Tag am Ende der Texte hinzu, um ein Leerzeichen zu erhalten.

0
user10105221

Anstelle von readmore.js erstellen Sie nicht ein benutzerdefiniertes, um die Steuerung zu erleichtern. Ich habe ein benutzerdefiniertes Plugin für Sie erstellt, und es ist fantastisch, da Sie es für alle Ihre Posts auf Ihrer Seite verwenden können, ohne für jede Funktion ein eigenes Ereignis zu erstellen.

Dies ist der vollständige Code:

$(document).ready(function(){
		$('div.post div.container').each(function(){
			var Hval = $(this).height();
			var Hval_P = $(this).parent().height();
			if (Hval > Hval_P) {
				$(this).parent().find('div#fade').css({'display':'block'});
				$(this).parent().find('a#more').css({'display':'block'});
			}
		});
		$('a#more').click(function(){
			var Hval = $(this).parent().find('div.container').height();
			var Hval_P = $(this).parent().height();
			if (Hval > (Hval_P+500)) {
				$(this).parent().css({'max-height':Hval_P+500});

				var offset = $(this).offset().top - 150;
				$([document.documentElement, document.body]).animate({
			        scrollTop: offset + 500
			    }, 250);

				$(this).hide();
				$(this).parent().find('a#evenmore').css({'display':'block'});
			}else{
				$(this).parent().css({'max-height':Hval-Hval_P});
				$(this).hide();
				$(this).parent().find('div#fade').css({'display':'none'});
				$(this).parent().find('a#less').css({'display':'block'});
			}
		});
		$('a#evenmore').click(function(){
			var Hval = $(this).parent().find('div.container').height();
			$(this).parent().css({'max-height':Hval});

			var offset = $(this).offset().top - 150;
			$([document.documentElement, document.body]).animate({
			    scrollTop: offset + 500
			}, 250);

			$(this).hide();
			$(this).parent().find('div#fade').css({'display':'none'});
			$(this).parent().find('a#less').css({'display':'block'});
		});
		$('a#less').click(function(){
			$(this).parent().css({'max-height':'300px'});

			var post_P = $(this).parent().offset().top;
			$([document.documentElement, document.body]).animate({
			    scrollTop: post_P
			}, 250);

			$(this).hide();
			$(this).parent().find('div#fade').css({'display':'block'});
			$(this).parent().find('a#more').css({'display':'block'});
		});
	});
.post{
		width: 500px;
		height: auto;
		max-height: 300px; /*whatever you want*/
		margin: auto;
		margin-bottom: 20px;
		padding: 5px 30px 20px 20px;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(0,0,0,.1);
		font-family: sans-serif;
		transition: all 250ms linear 0ms;
	}
	.container{
		width: 500px;
		height: auto;
		margin: auto;
		padding: 0px;
		position: relative;
		overflow: hidden;
	}
	.post div#fade{
		width: 100%;
		height: 150px;
		margin: auto;
		padding: 0px;
		position: absolute;
		bottom: 0px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 85%);
		z-index: 1;
		display: none;
	}
	.post a#more{
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	}
	.post a#less{
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	}
	.post a#evenmore{
		position: absolute;
		bottom: 10px;
		right: 20px;
		text-decoration: none;
		color: #4bbfee;
		z-index: 2;
		display: none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="post">
	<div class="container">
		<p>Look around, look at what we have. Beauty is everywhere, you only have to look to see it. That's the way I look when I get home late; black and blue. All you have to do is let your imagination go wild. We have a fantastic little sky!</p>

		<p>All kinds of happy little splashes. We don't want to set these clouds on fire. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. It looks so good, I might as well not stop. We need dark
		in order to show light. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself.</p>

		<img src="https://dummyimage.com/200x200/2d5cc2/fff" />

		<p>Van Dyke Brown is a very Nice brown, it's almost like a chocolate brown. We're trying to teach you a technique here and how to use it. This present moment is perfect simply due to the fact you're experiencing it.</p>

		<p>If what you're doing doesn't make you happy - you're doing the wrong thing. We spend so much of our life looking - but never seeing. In this world, everything can be happy. Everyone is going to see things differently - and that's the way it should be.
		And just raise cain.</p>

		<p>There's nothing wrong with having a tree as a friend. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. Tree trunks grow however makes them happy.</p>

		<p>Let your imagination be your guide. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. We wash our brush with odorless thinner. Every highlight needs it's own personal
		shadow. Don't kill all your dark areas - you need them to show the light. Working it up and down, back and forth.</p>

		<p>Don't forget to tell these special people in your life just how special they are to you. The only thing worse than yellow snow is green snow. That's why I Paint - because I can create the kind of world I want - and I can make this world as happy as
		I want it. Let's build an almighty mountain. You have to make almighty decisions when you're the creator.</p>

		<p>We have a fantastic little sky! Everybody's different. Trees are different. Let them all be individuals. Just go out and talk to a tree. Make friends with it. Go out on a limb - that's where the fruit is. There are no mistakes. You can fix anything
		that happens.</p>

		<p>You have to make those little noises or it won't work. We have no limits to our world. We're only limited by our imagination. I want everbody to be happy. That's what it's all about.</p>

	</div>
	<div id="fade"></div>

	<a href="#" id="more">More information</a>
	<a href="#" id="less">Less information</a>
	<a href="#" id="evenmore">Even more information</a>

</div>

0
Ahmad Salameh

Sie können die Artikel wie folgt ineinander verschachteln:

Big article
|
| Original content
| |
| | Small article
| | |
| | | Original content
| | | | "blah blah blah"
| | | |
| | | Read more
| | | | "more blahs"
| | | |
| | | End
| | |
| | End
| |
| Read more
| | "even more blahs"
| |
| End
|
End

Hier einige wichtige Punkte:

  • Zeigen Sie nicht den Link "Lesen Sie mehr" des großen Artikels, bis der kleine Artikel erweitert wurde
  • Zeigen Sie nicht den Link "Weniger lesen" des Kleinen Artikels
  • Es ist am besten, beide Artikel nacheinander zu schließen (was auch möglich ist). Wenn dies nicht der Fall ist, können Sie die Funktion setTimeout() verwenden, um das Schließen des Small-Artikels zu verzögern
0
awesomeguy