|
Сообщение от 12345678
|
|
Можно сузить этими двумя асайдами?
|
что мешает присвоить свой класс один и тот же нужным секциям, блокам с контентом,
и свой класс нужным ссылкам и тени в этой секции.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.ta2 {
height: 300px;
width: 100%;
transition: all 1s;
}
.ta {
height: 500px;
width: 100%;
transition: all 1s;
}
.read-next-grad,
.read-next-grad-2 {
text-align: center;
position: relative;
width: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
margin-top: -50px;
height: 50px;
}
.read-next,
.read-next22 {
text-align: center;
display: block;
padding-top: 20px;
font-weight: 700;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let widgets = document.querySelectorAll("aside.block");
widgets.forEach(el => {
el.addEventListener("click", (event) => {
let target = event.target;
if (target = target.closest("a.btn")) {
event.preventDefault();
let div = el.querySelector(".content");
div.style.height = div.scrollHeight + "px";
target.style.display = "none";
let shadow = el.querySelector(".shadow");
shadow.style.display = "none";
}
})
})
});
</script>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts block">
<p class="widget-title">Популярные статьи</p>
<div style="height:100%">
<div class="ta2 content" style="overflow:hidden;">
<ul class="wpp-list">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
</ul>
</div>
<div class="read-next-grad-2 shadow"></div><a class="read-next22 btn" href="#">Раскрыть список...</a></div>
</aside>
</div>
<br><br> И ещё вот этот блок <br><br>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts block">
<p class="widget-title">Возможно, Вас заинтересует</p>
<div style="height:100%">
<div class="ta content" style="overflow:hidden;">
<ul class="wpp-list" style="text-align:center;">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
</ul>
</div>
<div class="read-next-grad shadow"></div><a class="read-next btn" href="#">Раскрыть список...</a></div>
</aside>
</div>
</body>
</html>