Help Center - Add Expandable Promoted Article with Article Body

Zendesk level:  Beginner to Intermediate
Knowledge:  Copy & Paste / CSS
Time Required:  10 minutes

Hello Guys, 

I hope you will like this tip.

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

Follow the Below Steps - 

Copy the promoted article code and paste it on your Help Center templates 

{{#if promoted_articles}}
 <section class="articles home-promoted">
  <h3 class="promoted_title">{{t 'promoted_articles'}}</h3>
   <ul class="promoted-articles">
    {{#each promoted_articles}}
     <li class="promoted-articles-item">
      <a href="{{url}}" class="promoted-title">{{title}}</a>
      <div class="promoted-body">
       {{excerpt body characters=300}}<br/>
       <a class="see-article" href="{{url}}">See Article</a>
      </div>
     </li>
    {{/each}}
   </ul>
 </section>
{{/if}}

Copy the CSS code and paste it on your Help Center "CSS" editor 

.promoted_title {
   margin-bottom: 20px;
   text-align: center;
 }
 .promoted-articles-item .promoted-title {
   border: 1px solid #333; 
   color: #333;
   display: block;
   margin-bottom: 5px;
   padding: 15px;
 }
 .promoted-body {
   display: none;
   padding: 15px;
 }
 .promoted-articles-item .article-open {
   background: #0072ef;
   border-color: #0072ef;
   color: #fff;
 }
 .promoted-articles .see-article {
   background: #0072ef;
   border-radius: 40px;
   color: #fff;
   display: inline-block;
   font-size: 0.8em;
   margin-top: 10px;
   padding: 5px 15px;
 }
 .promoted-title::after {
   font-family: "entypo";
   content: "\E764";
   float: right;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
 }
 .article-open::after {
   transform: rotate(-180deg);
   color: #fff;
 }

Copy the JS code and paste it on your Help Center "JS" editor 

$(document).ready(function() {

 $('.promoted-articles-item > a').click(function(e) {
   e.preventDefault();
   $(e.target).toggleClass('article-open');
   $(this).next().slideToggle(250);
 });

});

It will look like this 

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

Thanks
Customer Support Team
http://customersupporttheme.com
(Experts in Zendesk Themes, Zendesk Help Center, Plugins, Help Center Branding and Customization.)