Load more blog posts :(

dennisedson · ‎Jul 19, 2018

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!

tjoyce · ‎Mar 25, 2019

@dennisedson - I know, I couldn't miss an opportunity to troll you 😄

View solution in original post

SShubham · ‎Mar 1, 2021

Hahaha Is this joke, you set id on loop #blog-hidden. but as per the rule id should be unique. use class .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>

dennisedson · ‎Mar 1, 2021

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

tjoyce · ‎Mar 25, 2019

@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 () {
    });
});

dennisedson · ‎Mar 25, 2019

@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 · ‎Mar 25, 2019

@dennisedson - I know, I couldn't miss an opportunity to troll you 😄

tjoyce · ‎Mar 25, 2019

@dennisedson - you marked that answer as solved, love it!

dennisedson · ‎Mar 25, 2019

it was clearly the correct answer 😉

dennisedson · ‎Mar 25, 2019

@Fred_erick , i was using a custom module so the blog settings did not have anything to do with this setup 🙂

Fred_erick · ‎Mar 25, 2019

In what module do I have to paste the html and js code?

dennisedson · ‎Jul 20, 2018

figured it out. replaced the id="blog-hidden" for class ="blog-hidden"

for the post. and updated script to reflect that.

duh

Fred_erick · ‎Mar 25, 2019

Hi,

what are your Blog settings for the post list to "load more" items on click?

Thx

dennisedson · ‎Mar 25, 2019

@Fred_erick , what setting do you mean?

Fred_erick · ‎Mar 25, 2019

Just like this setting:

dennisedson · ‎Jul 19, 2018

also,

here is a pen of it working with divs

https://codepen.io/billyoncetoldme/pen/jpVmNg

CMS Development