Hi Everybody, I wanted to post this here because I've been having lots of problems getting the "Show less than 6 articles in a section in Help Center" to work on my Help Center's Home Page with accordions and hopefully it'll stop anybody else having the same issues as me.

This code may not work on your Help Center unless you are using Home Page accordions (expandable category menus). If you are not using Home Page accordions then please use the standard code posted in this URL  - https://support.zendesk.com/hc/en-us/community/posts/203458986-Show-less-than-6-articles-in-a-section-in-Help-Center

Example of final Help Center can be found here - https://bootyquest.zendesk.com/hc/en-us

Details for adding accordions to your Home Page can be found here - https://support.zendesk.com/hc/en-us/community/posts/115001228168-Copenhagen-Theme-Home-Page-Accordions

With the Code found here - https://gist.github.com/moderatorwes/ee02605c0e502b6f1be7fecb7ad03035

All courtesy of Moderator Wes

Issues experienced -

"See all # articles" not displayed

"See all # articles" URL undefined leading to 404 error page

"More...See all # articles" shown

"More..." and "See all # articles" shown as two separate URLs

"See all 6 articles" shown when there are more than 6 articles

For Home Page with Accordions.

JavaScript

// Limit Article List to display only 3 entries
if( document.location.href.indexOf('section') == -1 ) {
var categories = $('ul.article-list');
for (var j = categories.length - 1; j >= 0; j--) {
var articles = $(categories[j]).find('li'),
nativeMore = $(categories[j]).siblings('.see-all-articles');
if ( articles.length > 3 ) {
for (var k = 3; k < articles.length; k++ ) {
$(articles[k]).hide();
}
var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';
if( articles.length <= 6 && nativeMore.length == 0 ) {
linkText += "See all " + articles.length + " articles";
}
$("<a class='see-all-articles' href=" + moreLink + ">" + linkText + "</a>").insertAfter($(categories[j]));
}
}
}

Home Page HTML

Code found here - https://gist.github.com/moderatorwes/ee02605c0e502b6f1be7fecb7ad03035

*** PLEASE NOTE *** It is important that you only swap out the code found in the link above in section Home.html between lines 18-40 

<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>

The difference in the above HTML is in line 2-3 where it has this by default:

<a href="{{url}}">
<h3 class="home-section">{{name}}</h3></a>

Having the above (default) caused the "See all # articles" URL to become undefined. The problem was that the above JavaScript was targeting the <a> tag held within the <h3> tag, unfortunately it was the other way around with the <h3> tag being held within the <a> tag. So changing it to the below stopped the URL being undefined.

<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>

Displaying "See all 6 articles" when there are more than 6 articles

To fix this issue you need to ensure that the bold section of the below Home Page Section HTML is present, if it's not then it will only display "See all 6 articles" regardless of how many articles above 6 you have.

<section class="section">
<h3 class="home-section"><a href="{{url}}">
{{name}}</a></h3>
<ul class="article-list promoted-articles">
{{#each articles}}
<li class="promoted-articles-item ">
<a href="{{url}}">
{{#if promoted}}
<i class="icon-star" "promoted-icon"></i>
{{/if}}
{{title}}
</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
</section>

If you want "See all # articles" to also be a button then use this version:

{{#if more_articles}}
<a href="{{url}}" class="see-all-articles button-small" role="button">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}

Remove the "more..." and stop it being a separate URL than "See all # articles"

Line 11-12 of the JavaScript just need a little tweaking here as the original JS has this line added:

var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = 'more...';

Simply change that line to this:

var moreLink = $(categories[j]).parent().find('h3 a').attr('href'),
linkText = '';

This removes the "More..." completely which, unsurprisingly, also stops there being two separate URLs.

Hopefully this'll stop others pulling there hair out in frustration, like I've been recently.

Enjoy ô¿ô