$('.content').readmore({
    speed: 435,
    maxHeight: 100,
    moreLink: '<a href="#">Подробнее</a>',
    lessLink: '<a href="#">Скрыть</a>',
    afterToggle: function(trigger, element, more) {
        if(more) {
            $(".content span").css("background", "none");
        }
        if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

Настройки readmore.js по-русски:

1. Speed — скорость разворачивания/сворачивания в милесекундах. Оптимально 500.
2. maxHeight — высота отображаемого блока в пикселях.
3. moreLink — название ссылки «подробнее».
4. lessLink — название ссылки «спрятать».

Далее мне необходимо сделать так, чтобы поверх текста был градиент, который не обрубал текст на указанных пикселях в maxHeight, а плавно сходил на «нет». Для этого я сделал span внутри элемента и добавил в него стили:

.content span{ 
    background: linear-gradient(0deg, #f3f3f3, transparent);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }

Соответственно при нажатии стили так и остаются, поэтому необходимо удалять фон при нажатии на кнопку «Подробнее». И для этого я написал условие:

if(more) {
            $(".content span").css("background", "none");
        }

Но возникла ещё одна загвоздка, когда нажимаем кнопку «Скрыть», то фон не возвращался, поэтому было написано следующее условие:

if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });