Подскажите как можно скрыть часть текста с параграфами, вот так:
jQuery:
function more() {
var p = $('p');
p.toggleClass('open');
if(p.hasClass('open')) {
p.css('max-height', p.prop('scrollHeight'));
} else {
p.css('max-height', 38);
}
}
p {
position: relative;
overflow: hidden;
max-height: 38px;
transition: 0.3s;
}
p:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset #fff 0 -30px 20px -15px;
height: 30px;
}
p.open:after {
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptate eveniet ut asperiores libero ipsa, corrupti, rerum iste adipisci pariatur ipsum numquam dolore eius aut aliquid, nulla facilis odio dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptate eveniet ut asperiores libero ipsa, corrupti, rerum iste adipisci pariatur ipsum numquam dolore eius aut aliquid, nulla facilis odio dicta.
</p>
<button onclick="more();">Читать далее</button>
Чистый JS:
function more() {
var p = document.querySelector('p');
p.classList.toggle('open');
if(p.classList.contains('open')) {
p.style.maxHeight = p.scrollHeight+'px';
} else {
p.style.maxHeight = '38px';
}
}
p {
position: relative;
overflow: hidden;
max-height: 38px;
transition: 0.3s;
}
p:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset #fff 0 -30px 20px -15px;
height: 30px;
}
p.open:after {
height: 0;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptate eveniet ut asperiores libero ipsa, corrupti, rerum iste adipisci pariatur ipsum numquam dolore eius aut aliquid, nulla facilis odio dicta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptate eveniet ut asperiores libero ipsa, corrupti, rerum iste adipisci pariatur ipsum numquam dolore eius aut aliquid, nulla facilis odio dicta.
</p>
<button onclick="more();">Читать далее</button>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
можно ли получить заголовки при отправке аякса, а имеено cookies?
Надо выбрать опциюЧтобы ее выбрать надо сначало открыть меню а потом выбрать, но у меня так получается когда я открываю меня,то все нормально,...