|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="cover"> <div class="text"> <div class="text_inner"> <p>...</p> </div> </div> <button type="button" class="text_more"> <div>Читать далее</div> <div>Скрыть часть</div> </button> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.text { display: grid; grid-template-rows: 12em; transition: all 300ms linear; } .text_inner { position: relative; overflow: hidden; } .text.shown { grid-template-rows: 1fr; } .text_inner::after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2em; background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); transition: all 300ms linear; opacity: 1; visibility: visible; } .text.shown .text_inner::after { opacity: 0; visibility: hidden; } .text_more.active div:nth-child(1), .text_more:not(.active) div:nth-child(2) { display: none; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
document.addEventListener('DOMContentLoaded', function(event) { // Показать / Скрыть часть текста [].forEach.call(document.querySelectorAll('.cover'), function(cover) { let text = cover.querySelector('.text'); [].forEach.call(cover.querySelectorAll('.text_more'), function(toggle) { toggle.addEventListener('click', function(e) { e.preventDefault(); if (text.classList.contains('shown')) { text.classList.remove('shown'); toggle.classList.remove('active'); text.scrollIntoView(); } else { text.classList.add('shown'); toggle.classList.add('active'); } }); }); }); }); |