Как показать некоторые элементы в сетке CSS, пока не будет нажата кнопка «Увидеть больше»?
У меня есть сетка css с несколькими элементами, каждая строка имеет три или четыре области сетки. Как отобразить одну строку (или первые три или четыре элемента), за которой следует кнопка «Подробнее»? Затем эта кнопка будет отображать следующий набор элементов, за которым следует кнопка «увидеть больше» и так далее.
В настоящее время я могу загрузить все элементы сетки сразу как полную сетку.
Вот css для сетки:
.grid-rp{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 2em;
margin: 0;
}
Вот содержимое сетки для двух элементов в качестве примера:
<div class = "grid-rp">
<div class = "rp-details">
<a href = "#" target = "_blank"><h3>Title</h3></a>
<p>content goes here</p>
</div>
<button class = "show-more">Show More</button>
<div class = "rp-details">
<a href = "#" target = "_blank"><h3>Title</h3></a>
<p>content goes here</p>
</div>
</div>
Мне нужна помощь с JS для кнопки.
Я хотел бы нажать кнопку «Загрузить еще» и отобразить следующую область содержимого. До щелчка этот контент должен быть скрыт.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Привяжите обработчик события щелчка и переключите класс (укажите CSS для скрытия) при щелчке.
// get button and bind click event handler
document.querySelector('.show-more').addEventListener('click', function() {
// get rp-detail element which is sibling to the button
// and then toggle the class
this.nextElementSibling.classList.toggle('hidden')
}).grid-rp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 2em;
margin: 0;
}
/* style for hiding */
.rp-details.hidden {
display: none;
}<div class = "grid-rp">
<div class = "rp-details">
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
<button class = "show-more">Show More</button>
<div class = "rp-details hidden">
<!-- set class here ---^^^^^^---->
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
</div>ОБНОВИТЬ : Если есть несколько элементов и позиция кнопки где-то в другом месте, сделайте это так.
// get button and bind click event handler
document.querySelector('.show-more').addEventListener('click', function() {
// get rp-detail element with toggle class
// then iterate and toggle class of each element
document.querySelectorAll('.rp-details.toggle').forEach(ele => ele.classList.toggle('hidden'))
}).grid-rp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 2em;
margin: 0;
}
/* style for hiding */
.rp-details.hidden {
display: none;
}<div class = "grid-rp">
<div class = "rp-details">
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
<div class = "rp-details hidden toggle">
<!-- set class here ---^^^^^^---->
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
<div class = "rp-details hidden toggle">
<!-- set class here ---^^^^^^---->
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
<div class = "rp-details hidden toggle">
<!-- set class here ---^^^^^^---->
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
<div class = "rp-details hidden toggle">
<!-- set class here ---^^^^^^---->
<a href = "#" target = "_blank">
<h3>Title</h3>
</a>
<p>content goes here</p>
</div>
</div>
<button class = "show-more">Show More</button>Пранав, спасибо за обновление, но, похоже, оно не работает. Любые идеи о том, как это исправить?
Пранав, вот ссылка на код, который вы настроили в jsfiddle: jsfiddle.net/iisrael/koyz74fr/1
@Iisrael: хорошо, позвольте мне проверить
@Iisrael: ой, нашел проблему ... отсутствует s здесь ('.rp-detail.toggle') => ('.rp-details.toggle')
Пранав, спасибо за проверку, это точно работает! Я ненавижу испытывать здесь свою удачу, но что, если я хочу загружать только следующие 2 элемента при каждом нажатии кнопки? Извините, я действительно начинаю свою работу с JS и, кажется, ничего не знаю. Кроме того, есть ли у вас какие-либо предложения по ресурсам для изучения того, как использовать элементы, которые вы показали в своем коде?
Спасибо за ваш ответ. Я попробовал эту настройку, и она работает для одной области содержимого после кнопки. Как я могу загрузить сразу три области контента с помощью кнопки? Кроме того, как я могу заставить кнопку загружать содержимое перед кнопкой в сетке? Это позволит кнопке всегда оставаться в конце сетки.