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

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

:-? код не надо править, возможно под словом якорь, у вас что что-то иное чем hash. делайте макет или уточните, что такое якорь.

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() {
    var open = $(this).parents('.content__text').toggleClass('open').is(".open");
    //var hash = window.location.hash;
    var hash = "#test";
    var el = $(hash);
    if(!open && el.length) {
         $('body,html').stop().animate({
              scrollTop: el.offset().top
          }, 1200)
    }
})
});
  </script>
</head>

<body>
<p id="test" style="height: 1000px">это условый якорь</p>
<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>

рони,
Это то, что нужно!

Моя благодарность не имеет границ)

Выручил второй раз уже! Всего тебе самого наилучшего. Спасибо!

рони, человек-то не разбирается в JavaScript, а вы клац-клац и в production. А потом люди говорят, дескать, какой тормоз, эти web-технологии... а оказывается рони забыл отменить прокрутки, когда пользователь вдруг захотел прокрутить в другую сторону... Либо пускай сразу переходит к якорю (самое простое решение, и не надо тонны legacy кода), либо уж тогда пишите реализацию, которая адекватно реагирует на ввод пользователя... (а не так, как я где-то видел: нажал, чтобы переместиться вверх, оно поплыло вверх, затем что-то интересное увидел, хотел обратно вниз прокрутить, так оно упорно вверх пыталось улететь, пока, однако, не доплыло до своего места назначения вверху! Я уже вам писал о том, почему не стоит блокировать ввод пользователя при помощи scrollTop. А на сенсорном экране это выглядит как будто перестало реагировать на жесты или залагало. Это ресурс, где люди воспринимают ваш код как должное, что именно так оно максимум может работать, почему бы не предоставить решение без проблем?)

напишите пожалуйста решение, мне сложно понять, почему scrollTop плохо, но других решений для плавного перемещения я не знаю.
ваш вариант тут я не понял, поэтому не знаю как его использовать.
ещё пара "тупых" вопросов: зачем отменять скролл, это не ссылка, и как отменить прокрутку, если не используется обработка события "scroll"?я ценю ваши советы, но мой уровень подготовки иногда не позволяет, даже понять, что вы хотите донести кодом или обьяснениями.

Оно не плохо, вам нужно более осторожно его использовать. Вот, в вашем примере, когда нажмешь кнопку, чтобы свернуть, начинается анимация в виде прокрутки вверх. Она длится 1.2 секунды. Если до того, как закончилась эта анимация, пользователь начнёт любым способом прокрутку, то начнётся дёрганье, поскольку скрипт крутит в одном направлении, вы в другом. Получается, что если во время такой анимации пользователь начнёт прокрутку, анимацию надо прекратить! Вот добавил в ваш пример...

<!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;
			background: white;
			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() {
			var page = $('body,html');
			var types = "scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove";
			function pageHandler() { page.stop(); }
			$('.content__text').on('click', '.toggle', function() {
				var open = $(this).parents('.content__text').toggleClass('open').is(".open");
				var target = $("#test" /* window.location.hash */);
				if (!open && target.length) {
					page.on(types, pageHandler).animate({
						scrollTop: target.offset().top
					}, 1200, function() {
						page.off(types, pageHandler);
					});
				}
			})
		});
	</script>
</head>

<body>
	<p id="test" style="height: 1000px">это условый якорь</p>
	<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>
		<button class="toggle product__button"></button>
	</div>

</body>

</html>

Я думаю, у вас хороший уровень, просто вы почему-то думаете, что если прокрутка, то это только колёсико мыши (почему я вам добавил столько событии?), если нажатие, то непременно только мышкой (почему я вам заменил на <button>), и т. д. В HTML в плане доступности продумано, и с этим не надо бороться (например, давайте всё сбросим, отменим и заново изобретём)

понятно.
согласен.
спасибо.