Решено. Кнопка скрытия и показа для галереи Elementor Wordpress
Появилась задача от клиента сделать так, чтобы показывать картинки в галереи Elementor не полностью и скрывать за кнопкой "Показать еще работы" при нажатии которой будут показываться все картинки.
1. Добавляете галерею Elementor на страницу, загружаете фото, настраиваете по своему вкусу и после нее добавляете кнопку, которой назначаете класс show-more.


2. Далее я написал довольно простой скрипт, который скрывает все картинки и показывает нужное число, у меня выставлено на показ 12 штук.
body e-gallery-item:nth-child(-n+12)
Код скрипта:
document.addEventListener("DOMContentLoaded", function () {
const style = document.createElement("style");
style.textContent = `
body .e-gallery-item {
display: none;
}
body e-gallery-item:nth-child(-n+12) {
display: block;
}
body .show-more {
display: block;
text-align: center;
margin: 20px 0;
cursor: pointer;
color: #0073e6;
}
body .show-more:hover {
text-decoration: underline;
}
`;
document.head.appendChild(style);
const showMoreButton = document.querySelector('.show-more');
const galleryItems = document.querySelectorAll('.e-gallery-item');
if (showMoreButton && galleryItems.length) {
showMoreButton.addEventListener('click', function () {
galleryItems.forEach(item => {
item.style.display = 'block';
});
showMoreButton.style.display = 'none';
});
}
});
Вы можете поменять на свое количество например -n+6. Код скрипта нужно разместить в custom code Elementor,а если у вас не Pro версия, то с помощь. плагина WP Snippets или блоком HTML в Elementor.
Демонстрация работы галереи:

Если вы хотите сделать так, чтобы кнопка не пропадала после показа всех картинок, текст в ней менялся на Скрыть работы и можно было скрыть картинки как в первоначальном состоянии, то немного дополню скрипт:
document.addEventListener("DOMContentLoaded", function () {
const style = document.createElement("style");
style.textContent = `
body .e-gallery-item {
display: none;
}
body .e-gallery-item:nth-child(-n+12) {
display: block;
}
body .show-more {
display: block;
text-align: center;
margin: 20px 0;
cursor: pointer;
color: #0073e6;
}
body .show-more:hover {
text-decoration: underline;
}
`;
document.head.appendChild(style);
const showMoreButton = document.querySelector('.show-more');
const galleryItems = document.querySelectorAll('.e-gallery-item');
let isExpanded = false; // Переменная для отслеживания состояния
if (showMoreButton && galleryItems.length) {
showMoreButton.addEventListener('click', function () {
if (!isExpanded) {
// Если галерея свернута, показываем все элементы и меняем текст на "Скрыть работы"
galleryItems.forEach(item => {
item.style.display = 'block';
});
showMoreButton.textContent = 'Скрыть работы';
} else {
// Если галерея развернута, скрываем элементы, кроме первых 12, и меняем текст на "Показать еще работы"
galleryItems.forEach((item, index) => {
if (index >= 12) {
item.style.display = 'none';
}
});
showMoreButton.textContent = 'Показать еще работы';
}
isExpanded = !isExpanded; // Инвертируем состояние
});
}
});