Recent searches


No recent searches

Help Center - Add Expandable Promoted Article with Article Body



Posted Aug 04, 2017

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.)

 


1

14

14 comments

image avatar

Nicole Saunders

Zendesk Community Manager

Thanks for sharing this, Customer Support Theme Team!

0


image avatar

Jennifer Rowe

Zendesk Documentation Team

I love this tip! Thanks for sharing it!

0


Thank you!!, @Jennifer Rowe & @Nicole Relyea

0


image avatar

Jacob the Moderator

Zendesk LuminaryCommunity Moderator

Very nice! Thanks for sharing!

0


image avatar

Heather Rommel

Zendesk LuminaryThe Product Manager Whisperer - 2021Community Moderator

GREAT Tip! Thank you!

0


image avatar

Heather Rommel

Zendesk LuminaryThe Product Manager Whisperer - 2021Community Moderator

Hmmm, we tried it and it's not quite right. I bet it's user error. Any ideas for us to try to correct what we're getting?

1. We're getting an uneven box on all but the last article.

2. The list doesn't seem to want to be centered or appear in columns in accordance with a responsive theme.

3. When you click to expand, it's opening the article, not showing the expected sneak peek

 

0


Hello @Heather R

Can you please tell me your Help Center URL.

Thanks

0


image avatar

Heather Rommel

Zendesk LuminaryThe Product Manager Whisperer - 2021Community Moderator

0


Hello @Heather R,

Please see the solutions below, You did the wrong implement.

We tested this tip on Copenhagen Theme before posting.

Remove line no. 968, 963, 996, 991 CSS

Remove curly braces on JS - 

If need any help feel free to message us at - help@customersupporttheme.com

Let us know if need anything.

Thanks

Customer Support Theme Team
 

0


image avatar

Heather Rommel

Zendesk LuminaryThe Product Manager Whisperer - 2021Community Moderator

It worked! Fantastic, thank you. I will work on customizing the colors.

0


image avatar

Heather Rommel

Zendesk LuminaryThe Product Manager Whisperer - 2021Community Moderator

How do we use this functionality on the Category pages to expandable list of Sections?

We would want each section to display and when you click on it, it expands to the article and when THAT displays, it should expand to see a preview of the article. Then when you click on the article/see more it should bring you to the article.

0


Big thanks for the excerpts code!

1


This doesn't work for me, I am getting “'body' does not exist” error. Did this change with Templating API v4?

1


Same here. Was unable to find any other option for excerpt for promoted articles. 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post