最新記事5件を表示し、残り5件は「more」で表示 ループの分け方

いつもお世話になっております。

新着記事の一覧を、最新5件を表示し、下部の「more」ボタンを押すと6件目から10件目の記事が表示されるような形にしたいと思っています。
「最新5件まで」「6件目以降」の記事の抽出まではできたのですが、
下記のタグの中に「more」ボタンの設置や、6件目以降の記事たちだけを<div>で囲いたい(始めは非表示にしたいので)のですが、上手くいきません。

<?php if ( have_posts() ) : ?>
<?php $cnt = 0; ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php if($cnt < 5) : ?>

<?php // 5件目までここから ?>
アイキャッチ・記事タイトルなど
<?php // 5件目までここまで ?>

<?php else: ?>
<?php // 6件目以降ここから ?>
アイキャッチ・記事タイトルなど
<?php // 6件目以降ここまで ?>
<?php endif; ?>

<?php $cnt++; ?>
<?php endwhile; ?>
<?php endif; ?>

★希望の表示順
[5件目までの記事()]
[moreボタン]
[6件目以降の記事(moreを押すと表示される)]

3行目のループタグの影響で、「more」やdivの囲いもループ化されてしまいます。
どうにかループを分けたり、または別の方法で解決できますでしょうか。
ご教授いただけますと幸いです。

また、このような表示は最初のページのみで、11件目以降(2ページ目以降)は普通に記事一覧が表示されるような形を想定しております。

よろしくお願いいたします。