Доброго времени суток, уважаемые специалисты.
На сайте используется адаптивная тема, если сайт отображается на мобильном, то список
Возможно, вас заинтересует и
Популярные статьи отображаются не полностью, часть скрывается и раскрывается полностью по клику.
Вот наглядно, как это выглядит
https://jsfiddle.net/tn8qx0mz/
Использую для этого вот этот код:
jQuery(function() {
var t = jQuery('.ta'),
max, min = 600;
jQuery('.read-next').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad, .read-next").hide();
return false
})
})
jQuery(function() {
var t = jQuery('.ta2'),
max, min = 300;
jQuery('.read-next22').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad-2, .read-next22").hide();
return false
})
})
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" id="jquery-js"></script>
<script>
jQuery(function() {
var t = jQuery('.ta'),
max, min = 600;
jQuery('.read-next').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad, .read-next").hide();
return false
})
})
jQuery(function() {
var t = jQuery('.ta2'),
max, min = 300;
jQuery('.read-next22').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad-2, .read-next22").hide();
return false
})
})
</script>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Популярные статьи</p>
<div style="height:100%">
<div class="ta2" 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"></div><a class="read-next22" href="#">Раскрыть список...</a></div>
</aside> </div>
<br><br> И ещё вот этот блок <br><br>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Возможно, Вас заинтересует</p>
<div style="height:100%">
<div class="ta" 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>
<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"></div><a class="read-next" href="#">Раскрыть список...</a></div>
</aside> </div>
Код самого блока, который раскрывается по нажатию.
на некоторых страницах помимо этого jQuery кода никакого другого нет, вот я и хочу отключить там добавление jQuery библиотеки. Но для этого требуется отказаться от выше приведённого кода. Какой будет код с данным функционалом на нативном JS?