Skip to content

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

Donald McGuinn 2 years ago

Thanks! Updated!

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)?

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.