Add Expandable Promoted Article with Article Content

by Zendesk Themes in Knowledgebase on February 16, 2021

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

Hello Zendesk Guide Users, 

I hope you will like this tip.

Now you can show your Help Center “Promoted articles” with accordion format.

Follow the Below Steps –

Copy the below tag code and paste it on your Help Center “document_head.hbs” template

<script src=""></script>

Copy the below code and paste it on your “home_page.hbs” template

<div class="container">
{{#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 __promoted_item">
      <a href="{{url}}" class="promoted-title">
        <span class="angle_icon">
         <svg xmlns="" xmlns:xlink="" x="0px" y="0px"
     viewBox="0 0 284.935 284.936">
               <path d="M222.701,135.9L89.652,2.857C87.748,0.955,85.557,0,83.084,0c-2.474,0-4.664,0.955-6.567,2.857L62.244,17.133
      <div class="promoted-body">
       {{excerpt body characters=300}}<br/>
       <a class="see-article" href="{{url}}">See Article</a>

Copy the below CSS code and paste it on your “style.css” editor 

.promoted_title {
	margin-bottom: 20px;
	text-align: center;
body .promoted-articles-item .promoted-title {
	border: 1px solid #333; 
	color: #333;
	display: block;
	margin-bottom: 5px;
	padding: 15px;
	font-weight: 600;
body .promoted-articles-item .promoted-title:hover,
body .promoted-articles-item .promoted-title:focus {
	text-decoration: none;
body .promoted-articles-item {
	flex: 1 0 auto;
        padding-right: 0;
        width: 100%;
span.angle_icon {
	float: right;
.angle_icon svg {
	height: 10px;
	width: 10px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
.promoted-body {
	display: none;
	padding: 15px;
body .promoted-articles-item .article-open {
	background: #0072ef;
	border-color: #0072ef;
	color: #fff;
body .promoted-articles .see-article {
	background: #0072ef;
	border-radius: 40px;
	color: #fff;
	display: inline-block;
	font-size: 0.8em;
	margin-top: 10px;
	padding: 5px 15px;
.article-open .angle_icon svg {
	transform: rotate(90deg);
	color: #fff;
.article-open .angle_icon svg path {
	fill: #fff;

Copy the below JS code and paste it on your Help Center “script.js” editor 

$(document).ready(function() {

 $('.__promoted_item > a').click(function(e) {

Feel free to comment if facing any issue.

Share Your Valuable Opinions

Cart (0)

  • Your cart is empty.