retrieving first 3 content then last 3

Question

I'm trying to figure out how to get content dynamically from expression engine. Basically I have 6 article summaries as content. When the page loads, I'm getting 3 summaries, but I have a "show more" button. When it's clicked, I want to load the next 3 summaries but I don't know how to do this.

this is what my tags look like now:

{exp:channel:entries channel="blogposts" limit="3"}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>

{/exp:channel:entries}

Answer 1

You could use the offset parameter:

https://ellislab.com/expressionengine/user-guide/add-ons/channel/channel_entries.html#offset

But that wouldn't be very efficient since you'd need two repetitive channel:entries tags which don't perform very well. You could instead use count to output different markup on different passes:

{exp:channel:entries channel="blogposts" limit="6"}
    {if count == 3}<div style="display:none">{/if}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>
    {if count == total_results}</div><!-- close hiding div -->{/if}
{/exp:channel:entries}

... but that's not very readable or elegant in my opinion (I hate outputting disjointed chunks of opening/closing html tags, it becomes an ugly mess), so instead I'd use Stash with one set_list and two get_list tags, using offset and limit. Then if the actual markup for a single article becomes cumbersome you should abstract it out to a Stash embed to avoid the repetition.

{exp:stash:set_list name="entries" parse="yes"}
    {exp:channel:entries channel="blogposts" limit="6"}
        {stash:the-title}{title}{/stash:the-title}
        {stash:another-field}{blog_field}{/stash:another-field}
        {stash:and-another}{blog_field2}{/stash:and-another}
        {stash:link}{url_title_path=blog}{/stash:link}
        ...etc...
    {/exp:channel:entries}
{/exp:stash:set_list}

{exp:stash:get_list name="entries" limit="3"}
    <div class='article-box'>
        <h1>{the-title}</h1>
        ...etc... (or abstract all this markup to a Stash embed)
    </div>
{/exp:stash:get_list}

<div class="hidden-articles">
    {exp:stash:get_list name="entries" limit="3" offset="3"}
        <div class='article-box'>
            <h1>{the-title}</h1>
            ...etc... (or abstract all this markup to a Stash embed)
        </div>
    {/exp:stash:get_list}
</div>