// Extends shave.js JQuery plugin with a new shaveWithToggle
// Might be a good idea to put this in it's own file: e.g `jquery.shaveWithToggle.js`
$.fn.shaveWithToggle = function(maxHeight, options) {
var options = options || {};
var mergedOptions = $.extend(true, $.fn.shaveWithToggle.defaults, options);
var shrinkHtml = '<span class="' + mergedOptions.shrinkclassname + '">' + mergedOptions.shrinkhtml + '</span>';
var expandHtml = '<span class="' + mergedOptions.expandclassname + '">' + mergedOptions.expandhtml + '</span>';
// Put the expand html as part of the character,
// so that the shaving would also calculate that
// as part of the shaving process.
mergedOptions.character = mergedOptions.character + expandHtml;
this.shave.call(this, maxHeight, mergedOptions);
return this.each(function(index, element) {
var $element = $(element);
var $shaveCharacter = $element.find('.js-shave-char');
var $shavedContent = $element.find('.' + mergedOptions.classname);
var $shrinkButton = $(shrinkHtml);
// Get the expand button element, as it's already added
// by the shave js as part of the character
var $expandButton = $shaveCharacter.first('.' + mergedOptions.expandclassname);
$shaveCharacter.append($expandButton).on('click', function() {
mergedOptions.expand.call(element, $expandButton, $shaveCharacter, $shrinkButton, $shavedContent);
});
$shrinkButton.insertAfter($shavedContent).on('click', function() {
mergedOptions.shrink.call(element, $shrinkButton, $shaveCharacter, $expandButton, $shavedContent);
}).hide();
});
};
$.fn.shaveWithToggle.defaults = {
// Original shave options, which is used for this plugin
classname: 'js-shave',
character: '...',
// Additional options
shrinkclassname: 'js-shave-shrink',
shrinkhtml: ' <<',
expandclassname: 'js-shave-expand',
expandhtml: ' >>',
expand: function($expandButton, $shaveCharacter, $shrinkButton, $shavedContent) {
$shrinkButton.show();
$shavedContent.show();
$shaveCharacter.hide();
},
shrink: function($shrinkButton, $shaveCharacter, $expandButton, $shavedContent) {
$shrinkButton.hide();
$shavedContent.hide();
$shaveCharacter.show();
},
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/shave/2.5.3/jquery.shave.min.js" integrity="sha256-vfAHy8DeM92gBftShSriYE5lFMJjHJiqzx9J49ZqFfk=" crossorigin="anonymous"></script>
<div class="target" style="max-height: 60px; background-color: skyblue;">
<em>Lorem Ipsum</em> is simply dummy text of the <strong>printing and typesetting industry</strong>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <em>unknown printer</em> took a galley of type and scrambled it
to make a type specimen book. <strong>It has survived not only five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>, remaining essentially unchanged.
<em>Lorem Ipsum</em> is simply dummy text of the <strong>printing and typesetting industry</strong>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <em>unknown printer</em> took a galley of type and scrambled it
to make a type specimen book. <strong>It has survived not only five centuries</strong>, but also the leap into <strong>electronic typesetting</strong>, remaining essentially unchanged.
</div>
<script>
$(document).ready(function() {
$(".target").shaveWithToggle(60, {
// Takes in the normal set of options, plus additional options.
character: '......',
classname: 'js-shave-custom',
spaces: true,
// The options below are the default values for the additional options from shaveWithToggle plugin
// Can be ommitted if you're fine with these defaults, or you can change it to whatever
shrinkclassname: 'js-shave-shrink',
shrinkhtml: ' <<',
expandclassname: 'js-shave-expand',
expandhtml: ' >>',
expand: function($expandButton, $shaveCharacter, $shrinkButton, $shavedContent) {
$shrinkButton.show();
$shavedContent.show();
$shaveCharacter.hide();
},
shrink: function($shrinkButton, $shaveCharacter, $expandButton, $shavedContent) {
$shrinkButton.hide();
$shavedContent.hide();
$shaveCharacter.show();
},
});
});
</script>