Add Expandable Recent Articles with Article Content

Knowledge:  Copy & Paste / CSS
Time Required:  10 minutes

Hello Freshdesk Users, 

I hope you will like this tip.

Now you can show your Support Center “Recent articles” with accordion format.

Follow the Below Steps –

Copy the below code and paste it on your “portal home” template

<section class="recent-articles-blocks">
   <div class="container">
      <h1 class="text-center">Recent Articles</h1>
      <ul class="articles-list">
         {% for article in portal.recent_articles limit:6 %}
         <li class="recent-articles-list">
            <a class="article-title" href="{{article.url}}">{{article.title | h }}</a>
            {% if article.body_plain != blank %}
            <div class="__content"> 
              {{  article.body_plain | h | truncate:300 }}<br/>
              <a class="btn view-article" href="{{article.url}}">See article</a>
            </div>
            {% endif %}
         </li>
         {% endfor %}
      </ul>
   </div>
</section>

Copy the below JS code and paste it on your Help Center “Footer” template

<script type="text/javascript">
   jQuery(document).ready(function($){
    
      $('.recent-articles-list .article-title').click(function(e) {
        e.preventDefault();
        $(e.target).toggleClass('article-open');
        $(this).next().slideToggle(250);
      });

   });
</script>