support portal - Add Expandable Recent Article with Article Body

Hello Guys, 

I hope you will like this tip.

Now you can show your Help Center "Recent articles" with toggle format.

Follow the Below Steps -

Copy paste this code on your portal templates "Portal-home" page



<div class="container">
<section class="articles home-promoted">
<h2 class="text-center text-uppercase">Recent articles</h2>
<ul class="article-list promoted-articles">
  {% for article in portal.recent_articles limit:5 %}
<li class="promoted-articles-item">      
 <a class="promoted-title open" href="{{article.url}}">{{article.title | h }}</a>
  <div class="description-text promoted-body">
              {{  article.body_plain | h | truncate:260 }}<br>
    <a class="btn view-topic" href="{{article.url}}">View Topic</a>
  {% if article.body_plain != blank %}  
  {% endif %}
  {% endfor %}


Copy paste this CSS code on your Support Portal "styelsheet"


/*recent articles*/
.home-promoted h2 {margin: 44px 0 40px;font-size:40px;}
#hc_categories>a, .promoted-articles-item .promoted-title {background:#fff;border: 2px solid #dfdfdf;color: #333;display: block;padding: 15px;margin-bottom: 5px;}
.promoted-body {display: none;padding: 15px;font-size:18px;}
.home-promoted .promoted-articles-item .article-open, .toggle-list>a.article-open {background: #fe3635;color: #fff;}
.promoted-body .view-topic:hover, .see-all-articles:hover{border-color: #fe3635;color: #fff;}
.home-promoted .promoted-articles-item{font-size:18px;}
/*article dropdown css*/
.home-promoted .promoted-articles-item .article-open, .toggle-list>a.article-open {background: #fe3635;color: #fff;}
/*article icon css*/
.article-list li:before, .topic-list li:before, .ticket-list li:before, li.article-item:before, li.topic-item:before, li.ticket-item:before, li.note-item:before{display:none;}


Copy paste this JS code on your Support Portal "Footer page" (End Portion)


/*dropdown jss aricle list*/
  jQuery(".promoted-articles-item > a, .section-content .article-list-link").click(function(e){e.preventDefault(),jQuery("article-open"),jQuery(this).next().slideToggle(250)});

 It will look like this


For any issues or bugs please send us a message or you can also use Live Chat on our website.

Helpdesk Theme Team
(Experts in Freshdesk Themes, Freshdesk Portal, Support Portal Branding and Customization.)

Login or Signup to post a comment