Only Show 5 List Items in Term Filter

Description/Instructions

Hides all but 5 items in the term filter. Then shows 10 more at a time.

If this snippet helped, feel free to buy me a taco :)

document.addEventListener('DOMContentLoaded', function () {
var itemsToShow = 5;
var increment = 10;
var initialItemsToShow = itemsToShow;

// Add the "+ More" and "Show Less" links dynamically
var moreLink = document.createElement('a');
moreLink.id = 'show-more';
moreLink.href = '#';
moreLink.textContent = '+ More';
document.querySelector('.ts-term-dropdown-list').insertAdjacentElement('afterend', moreLink);

var lessLink = document.createElement('a');
lessLink.id = 'show-less';
lessLink.href = '#';
lessLink.textContent = 'Show Less';
lessLink.style.display = 'none'; // Initially hidden
moreLink.insertAdjacentElement('afterend', lessLink);

function showItems() {
var listItems = document.querySelectorAll('.ts-term-dropdown-list li');
listItems.forEach(function (item, index) {
if (index < itemsToShow) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});

if (document.querySelectorAll('.ts-term-dropdown-list li[style*="display: none"]').length > 0) {
moreLink.style.display = '';
} else {
moreLink.style.display = 'none';
}

if (itemsToShow > initialItemsToShow) {
lessLink.style.display = '';
} else {
lessLink.style.display = 'none';
}
}

showItems();

moreLink.addEventListener('click', function (e) {
e.preventDefault();
itemsToShow += increment;
showItems();
});

lessLink.addEventListener('click', function (e) {
e.preventDefault();
itemsToShow = initialItemsToShow;
showItems();
});
});

  • JS
Copy Code

Let's Chat About this Snippet