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
Nicole Saunders
Thanks for sharing this, Customer Support Theme Team!
0
Jennifer Rowe
I love this tip! Thanks for sharing it!
0
CST
Thank you!!, @Jennifer Rowe & @Nicole Relyea
0
Jacob the Moderator
Very nice! Thanks for sharing!
0
Heather Rommel
GREAT Tip! Thank you!
0
Heather Rommel
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
CST
Hello @Heather R
Can you please tell me your Help Center URL.
Thanks
0
Heather Rommel
1386274751
0
CST
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
Heather Rommel
It worked! Fantastic, thank you. I will work on customizing the colors.
0
Heather Rommel
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
iggyprom
Big thanks for the excerpts code!
1
Gaby Bitar
This doesn't work for me, I am getting “'body' does not exist” error. Did this change with Templating API v4?
1
Costel MA
Same here. Was unable to find any other option for excerpt for promoted articles.
0