Как сделать скрытие только части текста
 

Всем привет. Ребята спасите) вот есть код который уже работает как нужно. Единственная проблема я не могу сделать так чтобы можно было показывать к примеру первые 400рх контента в блоке, а всё что ниже скрывать под кнопку "Развернуть". Ещё вы увидите что там есть эффект который должен быть над кнопкой. В общем я пытался сделать как на РБК вот здесь https:// marketing.rbc.ru/research/41319/ но что то не получается. Помогите люди добрые)

$(document).ready(function () {
    $(".content").hide();
        $(".toggle").on("click", function (e) {
            
            var $this = $(this).prev('.content');
            var $text = $(this);
            $this.slideToggle('fast', function () {
                if ($(this).is(':visible')) {
                    $text.text('Свернуть');
                } else {
                    $text.text('Развернуть');
                }
            });
        });
    });

<div class="firstbl content__text shadow ">
  <div class="content content__text-wrap">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
    <div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
    <div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
    <div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
    <div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum cupiditate.</div>
    <div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
    <div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
  </div>
 <div class="toggle product__button">more info</div>
</div>
<style>
.content__text {
    font-size: 18px;
    line-height: 26px;
    font-family: Kazimir,'Helvetica CY',Arial,sans-serif;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    color: #333;
    max-height: 400px;
}
.content__text-wrap {
    margin-bottom: 20px;
}
.content__text.shadow:after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 400px;
    content: ' ';
    pointer-events: none;
    background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
    max-width: 176px;
    margin: 0 auto 31px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    font-family: GraphikCy-Medium,'Helvetica CY',Arial,sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
     display: block;
}
</style>

SL1de,
сложно придумать вариант, которого ещё нет на форуме ...
открывашка 230 на js закрыть на указанную величину
открывашка 231 со сменой текста на кнопке

открывашка со сменой текста на кнопке
 

SL1de,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style>
.content__text {
    font-size: 18px;
    line-height: 26px;
    font-family: Kazimir,'Helvetica CY',Arial,sans-serif;
    position: relative;
    color: #333;
}
.content__text-wrap {
    margin-bottom: 20px;
    max-height: 400px;
    overflow: hidden;

}

.open .content__text-wrap {
    max-height: none;
}
.open.content__text.shadow:after {
     opacity: 0;
     transition: 0s;
}

.content__text.shadow:after {
    transition: .8s;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 400px;
    content: ' ';
    pointer-events: none;
    background:    -moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    background:         linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,0) 1%,rgba(255,255,255,0) 70%,#fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.product__button {
    max-width: 176px;
    margin: 0 auto 31px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 3px;
    font-family: GraphikCy-Medium,'Helvetica CY',Arial,sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    display: block;
}

.product__button:after {
    content: 'Развернуть';
}
.open .product__button:after {
    content: 'Свернуть';
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $('.content__text').on('click', '.toggle' ,function() {
    $(this).parents('.content__text').toggleClass('open')
})
});
  </script>
</head>

<body>
<div class="firstbl content__text shadow">
  <div class="content content__text-wrap ">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus accusamus hic quae libero rem odit et fugit cumque dolore perferendis tempore officia illum atque nam, quia ut, quibusdam. Modi, ex.</div>
    <div>Doloribus magnam, labore vero voluptatum quaerat quidem eveniet quo eos, minus aliquid commodi obcaecati animi, facilis voluptatibus voluptas ab, quasi veniam totam soluta molestias natus. Repellat animi perspiciatis, quos vitae.</div>
    <div>Cumque ea laudantium corporis odio reprehenderit voluptates, quis iste aperiam eius pariatur itaque magni, autem consequuntur, odit officiis? Adipisci aliquid consequuntur tenetur quae magni eaque repellendus fuga quia nisi laboriosam!</div>
    <div>Eligendi ut recusandae officiis nostrum praesentium modi error, quae ab velit itaque, beatae reprehenderit delectus unde id facere aliquam totam est facilis culpa expedita aspernatur! Et amet omnis porro exercitationem.</div>
    <div>Fugit quisquam asperiores impedit ipsa, doloribus officiis maiores? Dolore possimus tenetur eum. Corrupti repudiandae doloribus officiis accusamus soluta fugiat consequatur hic, distinctio perferendis. Ipsum incidunt, magni veniam recusandae illum cupiditate.</div>
    <div>Iste autem sit quos provident fugiat doloribus, delectus adipisci inventore quam quis hic maxime. Deleniti optio quas hic reprehenderit voluptas eius fuga rerum, veritatis totam molestias officiis, deserunt quis aliquam.</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iusto soluta quibusdam, pariatur molestiae est. Provident impedit unde alias dolores rerum ex minus quae ab, et nihil similique fugit optio.</div>
    <div>Hic odit, adipisci. Nam quia dolor architecto debitis. Possimus dolor impedit excepturi quidem. Aperiam neque aut voluptatibus sit earum sint, libero consectetur repellendus doloremque architecto qui, suscipit autem est magnam.</div>
  </div>
 <div class="toggle product__button"></div>
</div>


</body>
</html>

Спасибо большое за ответ. Но немного не пойму теперь) кнопка меняется текст не скрывается в вашем варианте. Или я что-то нее так смотрю?

SL1de,
:-?

значит тексту достаточно места в 400px

точняк) экран большой прост... ОГРОМНОЕ спасибо!

Решено)

рони,
А можно ли сделать, чтобы при нажатии на кнопку свернуть экран пользователя перемещался на якорь на сайте и соответственно происходило сворачивание?

SL1de,

$(function() {
    $('.content__text').on('click', '.toggle' ,function() {
    var open = $(this).parents('.content__text').toggleClass('open').is(".open");
    var hash = window.location.hash;
    var el = $(hash);
    if(!open && el.length) {
         $('body,html').stop().animate({
              scrollTop: el.offset().top
          }, 1200)
    }
})
});

рони,
Я прошу прощения, но что нужно сделать, чтобы экран переводило на то место которое мне нужно?

Для меня js это темная магия к сожалению(

Могу только сделать предположение что вместо .top нужно поставить свой селектор?