Recent searches
No recent searches
Guide Tip: Category page with (conditionally) expandable section lists
Posted Sep 15, 2021
Hi again! I wanted to make some changes to our category pages.. there are several sections where Zendesk provides a "See all N articles" link when the full list is only 2 or 3 articles longer. I dislike getting shuffled off to another page just to see their titles. Even worse is when there's only 1 more article and it could have just been listed where the "See all..." link is! So let's change all that with some JavaScript. :-D
My help centre has one particularly enormous section, so there's also a size limit on this which you can change to suit your tastes. Depending on your CSS, it'll look something like this:
And here's the magic to add to your 'script.js' file:
// Zendesk Guide category pages with expandable listings
// author: Ashleigh Rentz, koresoftware.com
// license: https://mit-license.org/
window.onload = function() {
expandCategoryPage();
};
function expandCategoryPage() {
// Only execute this if we're on a category page.
if (document.getElementsByClassName("category-content")[0] == null) return;
const max_size_to_expand = 12; // Fall back to normal behaviour if larger.
const default_quantity = 6; // Zendesk default, unsure if it can be changed.
// Find the "See all N articles" links to (potentially) expand.
const see_all_array = document.getElementsByClassName("see-all-articles");
for (let i = 0; i < see_all_array.length; i++) {
var number_articles = see_all_array[i].innerText;
number_articles = parseInt(number_articles.match(/[0-9]+/));
if (number_articles <= max_size_to_expand) {
// Change text ASAP (\u25BC is unicode down-pointing triangle).
if ((number_articles - default_quantity) > 1) {
see_all_array[i].innerText = '\u25BC Show ' +
(number_articles - default_quantity) + ' more articles';
} else see_all_array[i].innerText = '';
expandThisSection(see_all_array[i]);
}
};
return;
async function expandThisSection(section_link_element) {
// Fetch the section page and create a list of <li>'s to add.
var section_page_response = await
fetch(section_link_element.getAttribute('href'));
var section_page_contents = new DOMParser().parseFromString(
await section_page_response.text(), 'text/html');
var article_list = section_page_contents.body.getElementsByClassName(
'article-list-item');
var articles_to_add = [];
for (let i = default_quantity; i < article_list.length; i++)
articles_to_add.push(article_list[i]);
// Get the <ul> for this section on the category page.
var list_element = section_link_element.previousElementSibling;
// Make sure it's the right thing, bail out if not.
if ((list_element.tagName !== 'UL') ||
(!(list_element.classList.contains('article-list')))) return;
// Insert the article(s).
if (articles_to_add.length == 1) {
// Insert the final article into the list, no expandable needed
list_element.append(articles_to_add[0]);
// Remove the 'see all' link.
section_link_element.remove();
} else {
// Insert more articles into the list as a hidden element in the DOM.
for (let i = 0; i < articles_to_add.length; i++) {
list_element.append(articles_to_add[i]);
list_element.lastElementChild.classList.add(
'collapsible-article-list-item');
list_element.lastElementChild.setAttribute('hidden', true);
};
// Change link action and assign a class for optional CSS styling.
section_link_element.classList.add('collapsible-article-list-control');
section_link_element.addEventListener('click',
function(){showMoreArticles(list_element, section_link_element)});
section_link_element.removeAttribute('href');
};
}; // end expandThisSection()
function showMoreArticles(list_element, section_link_element) {
for (let i = 0; i < list_element.children.length; i++) {
list_element.children[i].removeAttribute('hidden');
};
section_link_element.remove();
};
}; // end expandCategoryPage()
Again, I'm not a developer by trade, so there are probably ways to improve this. But it works great for me and I hope someone else out there finds it useful! :)
1
9 comments
Dave Dyson
Thanks for posting this, Ashleigh!
0
Ifra Saqlain
Hi @Ashleigh Rentz, did you update something into your category_page.hbs file for this nice functionality?
Thanks
Ifra
0
Ashleigh Rentz
Hi Ifra Saqlain — This works with plain Copenhagen, no changes needed. :) I used a little CSS to put things on a single row just so the screenshot wouldn't be huge, but otherwise this is all from the JavaScript.
0
Ifra Saqlain
@Ashleigh Rentz, it's working perfectly, I tried it again into fresh Copenhagen Theme and working as expected :)
It's really cool !
1
Joane Bonghanoy
Is there a way to make a section clickable or link it to the article. We have sections where there is only 1 article to it.
0
Ifra Saqlain
Hi Joane Bonghanoy,
You can add custom code like below:
Check the section name and hide those sections that have one article only:
Add custom blocks for those sections that hve one article:
Add CSS for ‘hide’ class:
Try this and let me know if you need more help.
Thanks
0
Joane Bonghanoy
Ifra Saqlain sorry, this is what happened, it became a separate category. I want the FAQs to stay as a subection and when I click it, it clicks to the article.
Our structure atm is
- General (category)
- Get Started (section)
- FAQs (subsection)
- FAQ article (I want the FAQs subsection to go straight to the article after clicking but should still be under the same section and category
0
Ifra Saqlain
Okay, on which page did you add the sub-section code?
home_page.hbs
section_page.hbs
category_page.hbs
0
Joane Bonghanoy
Ifra Saqlain I added your code in the home_page per your guide previously
0