Help Center - Add Dropdowns Knowledge base Category with Section and Article

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)

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

<div class="container">
   <div class="row">
      <div class="col-md-12 col-xs-12 col-sm-12">
         <div class="knowledge-base clearfix">
            {{#if categories}}
            <div class="category-tree">
               {{#each categories}}
               <section class="category">
                  <h2>
                     <a href="{{url}}">
                     {{name}}
                     <span class="cat_description">{{excerpt description characters=80}}</span>
                     </a>
                  </h2>
                  {{#each sections}}
                  <section class="section">
                     <h3>
                        {{#if internal}}
                        <span class="visibility-internal" data-title="{{t 'internal'}}">
                        <span class="visibility-internal-icon"></span>
                        </span>
                        {{/if}}
                        <a href="{{url}}">{{name}}</a>
                     </h3>
                     {{#if articles}}
                     <ul class="article-list">
                        {{#each articles}}
                        <li {{#if promoted}} class="article-promoted" {{/if}}>
                        {{#if promoted}}
                        <span data-title="{{t 'promoted'}}">★</span>
                        {{/if}}
                        <a href="{{url}}">{{title}}</a>
                        </li>
                        {{/each}}
                     </ul>
                     {{#if more_articles}}
                     <a href="{{url}}" class="see-all-articles">
                     {{t 'show_all_articles' count=article_count}}
                     </a>
                     {{/if}}
                     {{else}}
                     <i class="section-empty">
                     <a href="{{url}}">{{t 'empty'}}</a>
                     </i>
                     {{/if}}
                  </section>
                  {{else}}
                  <i class="category-empty">
                  <a href="{{url}}">{{t 'empty'}}</a>
                  </i>
                  {{/each}}
                  {{#if more_sections}}
                  <div>
                     <a href="{{url}}">{{t 'see_all_sections'}}</a>
                  </div>
                  {{/if}}
               </section>
               {{/each}}
               {{pagination}}
            </div>
            {{/if}}
         </div>
      </div><!--col--12-->
      </div><!--row-->
      </div><!--container-->

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