Hey all!
I am building a module that pulls in blog posts.
I want to display 5 and then have a load more button that will reveal the next 5.
I built it out and tested with dummy content (made a bunch of divs and pretended like they were blog posts) and it all worked out like a dream.
But, when i put the for loop in for the blog, it stopped working correctly.
It will display the first post and the rest stay hidden.
here is my html:
<div class="ml025">
{% set rec_posts = blog_recent_posts('{{ widget.blog_id }}') %}
{% for rec_post in rec_posts %}
<div id="blog-hidden">
<div class="grid">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="66" height="66" viewBox="0 0 66 66">
<image id="glassicon.svg" width="66" height="66" xlink:href="data:img/png;base64,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"/>
</svg>
<div class="ml025-content">
<h3 class="ml-default-sub-header">{{ rec_post.widgets.custom_blog_title.body.value }}</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="21" viewBox="0 0 24 21">
<image id="tag.svg" width="24" height="21" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAMAAABrN94UAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABDlBMVEVsK1j///9sK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1gAAAAduyRVAAAAWHRSTlMAAAQ9g8rvNSVrsfLmyNIVUt/2uHItSdiZBvGKQwgFcPBaAbL9KS/AxBCAVIbrwnv1Sqj6ChviAmZHPiSJz+jhLmUhH5gP6rSMC9cmdRa1J/yOSGraqxqjH0MYqgAAAAFiS0dEWZqy9BgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiBxMHGBGKMJpmAAAA80lEQVQoz23Q51KDUBAF4HODGmsIaCJECQRj72IktsSSorH38/5PIl6vCEzOr535Znd2F/hJThsZHcvLUqhE5fjE5BQ5PcOCnoSiQZqzcyWgPE/L/odKZWHRkUNQdT3W/D9YMm3E0a26t6zApYZEVla5ti6hxI0kQGwa3MpF4G/vpEE4u3vcj9Y9CA7TIETjiCHQ5HEWTmTHKc8yEJ635OVt4yINl7yScO3VO3oCur3+76/g1+i51RhueKsAsC0OygrugnsRA/BQ4OOThP5zmAQgbwYvXeCVmkgD/Df2mvbgXWQBcD7Y4ucQABrGlxgK0UAF3wZpHeIh2T5cAAAAAElFTkSuQmCC"/>
</svg><h4>Category:</h4>
<p>{{ rec_post.meta_description }}</p>
<div class="cta"><a class="cta_button green-button" href="{{ rec_post.absolute_url }}"><STRONG>DOWNLOAD</STRONG></a></div>
</div>
</div>
</div>
{% endfor %}
<a id="loady" href="#">Load More</a>
</div>
here is the js:
$(function () {
$("#blog-hidden").slice(0, 5).show();
$("#loady").on('click', function (e) {
e.preventDefault();
$("#blog-hidden:hidden").slice(0, 2).slideDown();
if ($("#blog-hidden:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
css of relevance is
#blog-hidden{display: none;}
If there is a better way of doing this, I am open to thoughts!
figured it out. replaced the id=“blog-hidden” for class =“blog-hidden”
for the post. and updated script to reflect that.
duh
Hi,
what are your Blog settings for the post list to “load more” items on click?
Thx
@Fred_erick , what setting do you mean?
tjoyce
March 25, 2019, 2:02pm
7
@dennisedson - don’t forget, 200 post max
also you are accessing the wrong ID to remove the load button:
if ($("#blog-hidden:hidden").length == 0) {
$("#loady").fadeOut('slow');
}
lastly, I think you already addressed this but, in your codepen you are using the doc.ready long form and shorthand, where shorthand is the only thing needed
$(document).ready(function(){
$(function () {
});
});
In what module do I have to paste the html and js code?
@tjoyce , this was a question from a long time ago
but thanks for your comments! I will have to look back to see what i have on that page. havent looked at it in a long time..
tjoyce
March 25, 2019, 3:35pm
10
@dennisedson - I know, I couldn’t miss an opportunity to troll you
@Fred_erick , i was using a custom module so the blog settings did not have anything to do with this setup
tjoyce
March 25, 2019, 3:42pm
12
@dennisedson - you marked that answer as solved, love it!
it was clearly the correct answer
Hahaha Is this joke, you set id on loop #blog-hidden .blog-hidden the code should be.
<div class="ml025">
{% set rec_posts = blog_recent_posts('{{ widget.blog_id }}') %}
{% for rec_post in rec_posts %}
<div class="blog-hidden">
<div class="grid">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="66" height="66" viewBox="0 0 66 66">
<image id="glassicon.svg" width="66" height="66" xlink:href="data:img/png;base64,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"/>
</svg>
<div class="ml025-content">
<h3 class="ml-default-sub-header">{{ rec_post.widgets.custom_blog_title.body.value }}</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="21" viewBox="0 0 24 21">
<image id="tag.svg" width="24" height="21" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAVCAMAAABrN94UAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABDlBMVEVsK1j///9sK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1hsK1gAAAAduyRVAAAAWHRSTlMAAAQ9g8rvNSVrsfLmyNIVUt/2uHItSdiZBvGKQwgFcPBaAbL9KS/AxBCAVIbrwnv1Sqj6ChviAmZHPiSJz+jhLmUhH5gP6rSMC9cmdRa1J/yOSGraqxqjH0MYqgAAAAFiS0dEWZqy9BgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfiBxMHGBGKMJpmAAAA80lEQVQoz23Q51KDUBAF4HODGmsIaCJECQRj72IktsSSorH38/5PIl6vCEzOr535Znd2F/hJThsZHcvLUqhE5fjE5BQ5PcOCnoSiQZqzcyWgPE/L/odKZWHRkUNQdT3W/D9YMm3E0a26t6zApYZEVla5ti6hxI0kQGwa3MpF4G/vpEE4u3vcj9Y9CA7TIETjiCHQ5HEWTmTHKc8yEJ635OVt4yINl7yScO3VO3oCur3+76/g1+i51RhueKsAsC0OygrugnsRA/BQ4OOThP5zmAQgbwYvXeCVmkgD/Df2mvbgXWQBcD7Y4ucQABrGlxgK0UAF3wZpHeIh2T5cAAAAAElFTkSuQmCC"/>
</svg><h4>Category:</h4>
<p>{{ rec_post.meta_description }}</p>
<div class="cta"><a class="cta_button green-button" href="{{ rec_post.absolute_url }}"><STRONG>DOWNLOAD</STRONG></a></div>
</div>
</div>
</div>
{% endfor %}
<a id="loady" href="#">Load More</a>
</div><script> $(function () {$(".blog-hidden").slice(0, 5).show();$("#loady").on('click', function (e) {e.preventDefault();$(".blog-hidden:hidden").slice(0, 2).slideDown();if ($(".blog-hidden:hidden").length == 0) {$("#loady").fadeOut('slow');}$('html,body').animate({scrollTop: $(this).offset().top}, 1500);});});</script>
@SShubham ,
I don’t think it was a joke, but it was a long time ago
And good point regarding the misuse of the ID.
