Zendesk Support Theme

Hi Everyone, 

I hope you will like this tip.

Now you can show your Help Center "Knowledge base category with section and article" with toggle format.

Copy paste this code on your Help Center "document_head-page" templates (End Portion)

Copy paste this code on your Help Center "Home-page" templates

   

      

         

            {{#if categories}}
            

               {{#each categories}}
               

                  

                     
                     {{name}}
                     {{excerpt description characters=80}}
                     
                  

                  {{#each sections}}
                  

                     

                        {{#if internal}}
                        
                        
                        
                        {{/if}}
                        {{name}}
                     

                     {{#if articles}}
                     

                        {{#each articles}}
                        

                        {{#if promoted}}
                        ★
                        {{/if}}
                        {{title}}
                        

                        {{/each}}
                     

                     {{#if more_articles}}
                     
                     {{t 'show_all_articles' count=article_count}}
                     
                     {{/if}}
                     {{else}}
                     
                     {{t 'empty'}}
                     
                     {{/if}}
                  

                  {{else}}
                  
                  {{t 'empty'}}
                  
                  {{/each}}
                  {{#if more_sections}}
                  

                     {{t 'see_all_sections'}}
                  

                  {{/if}}
               

               {{/each}}
               {{pagination}}
            

            {{/if}}
         

      

      

      

Copy paste this code on your Help Center "CSS" editor (End Portion)

.category-tree .category, .helpcenter_listing li a {
background: fff;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -3px #e6e6e6;
box-shadow: inset 5px 2px rgba(0, 0, 0, 0.08);
margin: 5px 0px;
border-radius: 4px;
}
.category-tree .category h2 a span:empty {
display: none;
}
.category-tree h2 {
margin: 0;
font-size: 20px;
position: relative;
}
.category-tree .category h2 a {
display: block;
padding: 20px;
color: #333;
border-bottom: 1px solid #ddd;
border-radius: 4px;
}
.category-tree .category h2 a span:empty {
display: none;
}
.open h2 a:after {
content: '\E75C';
}
.category-tree h2 a:after {
content: '\E75E';
font-family: 'entypo';
position: absolute;
top: 30%;
right: 15px;
font-size: 24px;
color: #b6b5b5;
}
.drop .section {
display: inline-block;
}
.category .section {
display: none;
}
@media (min-width: 767px)
.category-tree .section {
width: 49%;
}
.category-tree .section {
vertical-align: top;
width: 100%;
padding: 20px 20px 20px 20px;
}
.category-tree .section, .category-tree .section h3 {
margin: 0;
}

.category-tree .section h3 {
font-size: 17px;
}
.category-tree .section, .category-tree .section h3 {
margin: 0;
}
.category-tree .section h3 a {
color: #333;
padding-bottom: 10px;
display: block;
}
.category-tree .section ul {
padding-left: 18px;
}
.category-tree .section ul li {
font-size: 14px;
list-style-type: square;
padding: 0px 0px 10px 0px;
}
.category.open .article-list li a {
color: #454545;
}
.category-tree .section .see-all-articles {
color: #fff;
font-size: 13px;
}
.category-tree .section .see-all-articles {
color: #fff;
font-size: 13px;
border-radius: 50px;
}

Copy Paste this code on your Help Center "JS" editor (End Portion)

$(document).ready(function() {

// add button class
$('.category-tree .see-all-articles').addClass('btn');

// category dropdown js
$('.category-tree .category h2 > a').click(function(e) {
e.preventDefault();
$(this).parents('.category').toggleClass('drop');
})

});

It will look like this 

if you face any issues or bugs please contact us email:-  zendeskportaltheme@gmail.com   and our website.

Thanks