Snippets / JS
JS
Only Show 5 List Items in Term Filter
D
Donald McGuinn
·
213 views
·
Updated 2 years ago
Hides all but 5 items in the term filter. Then shows 10 more at a time.
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 · 56 lines
Discussion 1
Ask a question or share how you used this.
Log in
to join the discussion.
imfaisal024
2 years ago
Here is updated version; only add script; https://github.com/faisalae/voxel/tree/main
imfaisal024
2 years ago
Please try this updated code; this will work multiple terms and categories; https://github.com/faisalae/voxel/tree/main
michaelmellad
1 year ago
The code applies to all the terms on the page, showing 5 terms. Can I exclude a specific taxonomy to show more (like 10 or 15)?