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.)
-
Thanks for sharing this, Customer Support Theme Team!
-
I love this tip! Thanks for sharing it!
-
Thank you!!, @Jennifer Rowe & @Nicole Relyea
-
Very nice! Thanks for sharing!
-
GREAT Tip! Thank you!
-
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
-
Hello @Heather R
Can you please tell me your Help Center URL.
Thanks
-
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
-
It worked! Fantastic, thank you. I will work on customizing the colors.
-
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.
-
Big thanks for the excerpts code!
Please sign in to leave a comment.
12 Comments