Cкрыть часть текста

203
20 июня 2018, 09:40

Подскажите как можно скрыть часть текста с параграфами, вот так:

Answer 1

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>

READ ALSO
Получить Request headers при аяксе

Получить Request headers при аяксе

можно ли получить заголовки при отправке аякса, а имеено cookies?

172
Select option(выбрать опцию)

Select option(выбрать опцию)

Надо выбрать опциюЧтобы ее выбрать надо сначало открыть меню а потом выбрать, но у меня так получается когда я открываю меня,то все нормально,...

180
API Leaflet. Меню

API Leaflet. Меню

Как сделать такое менюНикак не получаеться, возможно что-то упускаю

194