Здравствуйте. Имеется список с n-ным кол-вом пунктов. Как сделать так, чтобы показывались, например, первые 4 пункта, а остальные - по нажатию на кнопку (с возвращением в исходное положение при повторном нажатии), причем с привязкой именно к кол-ву пунктов, а не по заданной высоте.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
<li>First item</li>
<li>First item</li>
</ul>
<a href="#close" class="button">Show</a>
UPD: предложенные ниже варианты в целом отвечают на мой вопрос, но я хотел бы использовать для такого списка анимацию. К сожалению, сейчас она работает не совсем корректно (сворачивает/раскрывает по отдельности каждый пункт списка), может есть варианты как этого избежать? Ссылка на пример с анимацией в codepen. Кроме того, мне интересно, почему маркеры пунктов списков после раскрытия ul
появляются не сразу.
$(function(){
$('.show-hide-btn').click(function(){
$('.last-changes-item:nth-child(n+5)').slideToggle('');
});
});
.last-changes-block {
margin-top: 30px;
}
.last-changes-list {
margin: 0 0 0 17px;
padding: 0;
list-style: none;
}
.last-changes-list .last-changes-item {
position: relative;
margin-bottom: 15px;
line-height: 15px;
}
.last-changes-list .last-changes-item:nth-of-type(n+5) {
display: none;
}
.last-changes-list .last-changes-item:before {
content: '';
position: absolute;
top: 5px;
left: -16px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #333;
}
.last-changes-item .date {
margin-left: 12px;
font-family: 'Droid Serif';
font-size: 13px;
font-style: italic;
color: #999;
white-space: nowrap;
}
.show-hide-btn,
.show-hide-btn1 {
display: inline-flex;
align-items: center;
height: 29px;
font-family: 'Roboto Slab';
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.show-hide-btn:hover,
.show-hide-btn1:hover {
background: #FBBC25;
color: #333;
}
.show-hide-btn .fa,
.show-hide-btn1 .fa {
margin-left: 5px;
font-size: 13px;
}
.last-changes-item:nth-child(n+5) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="last-changes-block">
<ul class="last-changes-list visible-last-changes">
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.24.0</strong> for Android 4.1</span>
<span class="date">Nov. 21, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.22.1</strong> for Android 4.1</span>
<span class="date">Nov. 14, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.22.0</strong> for Android 4.1</span>
<span class="date">Nov. 9, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.20.0</strong> for Android 4.1</span>
<span class="date">Nov. 6, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.24.0</strong> for Android 4.1</span>
<span class="date">Nov. 21, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.22.1</strong> for Android 4.1</span>
<span class="date">Nov. 14, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.22.0</strong> for Android 4.1</span>
<span class="date">Nov. 9, 2016</span>
</li>
<li class="last-changes-item">
<span class="title">Twitter <strong>v.6.20.0</strong> for Android 4.1</span>
<span class="date">Nov. 6, 2016</span>
</li>
</ul>
<a class="show-hide-btn">
<span>Show more</span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
</div>