Всем привет. Ребята спасите) вот есть код который уже работает как нужно. Единственная проблема я не могу сделать так чтобы можно было показывать к примеру первые 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>