You can use it below code as given formates:

1) Portal home

{% if portal.has_solutions %}
<section class="section-kb">
  <div class="container">
  <h3 class="heading">{% translate portal.knowledge_base %}</h3>
  {% for category in portal.solution_categories %}
    {% if category.folders_count > 0 %}
  <div class="knowledge-base clearfix">
                  <div class="category-tree">
                <section id="category1" class="category">
      <h2 class="open">{{ category.name | link_to: category.url }}</h2>
        {% for folder in category.folders %}
          <section class="hc-section">
            <h4 class="text-uppercase">
              {{ folder | link_to_folder_with_count }}
            </h4>
            {{ folder | article_list:5 }}
          </section>
        {% else %}
          {{ portal | filler_for_solutions }}
        {% endfor %}
            </section>
                      </div></div>
    {% endif %}
  {% endfor %}
{% endif %}
</div>
</section>

2) script code

<script>

jQuery(document).ready(function() {
jQuery(".category-tree").on("click", "h2 a", function() {
        jQuery(this).parent().nextAll().toggle(250);
        return !1
    });
    jQuery('.category-tree .category h2 > a').click(function(e) {
        e.preventDefault();
        $(this).parent().toggleClass('open')
   })(jQuery);
)

</script>

 3) Css

.section-kb {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f5f5f5;
    margin-bottom: 30px;
}
.knowledge-base .category {
    float: left;
    width: 100%;
}
.knowledge-base .category-tree .category>h2 {
    margin: 0;
    padding: 1px;
    font-weight: 700;
}
.knowledge-base .category-tree .category>h2 a {
    display: block;
    font-weight: 300;
    padding: 20px 45px 20px 20px;
    background-color: rgba(255,255,255,0.89);
    border-width: 1px 1px 1px 5px;
    border-color: #f63;
    border-radius: 3px;
    color: #333;
    position: relative;
    text-transform: uppercase;
    border-style: solid;
}
.open > a {
    outline: 0;
}
.knowledge-base .hc-section {
    display: none;
    padding: 20px 25px;
    float: left;
    width: 49%;
    vertical-align: top;
}
.knowledge-base .hc-section h4 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}
.hc-section h4 a {
    color: #333;
    font-size: 1.6em;
}

  4) image

If you face any problem then contact us info@helpdesktheme.com

Thanks

Regards Helpdesktheme

I have implemented this code but the Script code is not working. The Categories in the knowledge base section on Portal Home are not being displayed as collapsible containers and every time I click the Category Name, I am redirected to the respective Category URL. 

I have implemented this code but the Script code is not working. The Categories in the knowledge base section on Portal Home are not being displayed as collapsible containers and every time I click the Category Name, I am redirected to the respective Category URL.