jQueryでさらに読み込むボタンをクリックすれば要素を2列づつ表示するにはどうすればいいでしょうか？

Question

前提・実現したいこと

http://black-flag.net/jquery/20120523-3848.html
こちらのサイトを参考にして2列づつ要素を表示させたいのですがjQuery
のコードが難しいため短いコードで設定できないでしょうか？

          <ul class="bunjo_wrap">
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo01.jpg" alt="福岡市東区美和台3丁目">
              <h4>福岡市東区美和台3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>
                  1号地　170.33㎡<br>（51.52坪）<br>2号地　170.34㎡<br>（51.52坪）予約有
                </dd>
                <dt>交通</dt>
                <dd>
                  西鉄バス　　三苫駅停　徒歩4分<br />西鉄貝塚線　三苫駅　　徒歩4分
                </dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo02.jpg" alt="">
              <h4>福岡市東区舞松原3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　161.35㎡<br />（48.80坪）</dd>
                <dt>交通</dt>
                <dd>
                  西鉄バス　若宮4丁目バス停　徒歩3分<br />JR香椎線　舞松原駅　徒歩12分<br />鹿児島本線　千早駅　徒歩15分
                </dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区舞松原3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo03.jpg" alt="福岡市東区松崎4丁目">
              <h4>福岡市東区舞松原3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　161.35㎡<br />（48.80坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　若宮4丁目バス停　徒歩3分<br />JR香椎線　舞松原駅　徒歩12分<br />鹿児島本線　千早駅　徒歩15分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo04.jpg" alt="">
              <h4>福岡市東区松崎4丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　193.40㎡<br />（58.50坪）<br />4号地　192.66㎡<br />（58.27坪）</dd>
                <dt>交通</dt>
                <dd>JR鹿児島本線　千早駅　徒歩12分<br />西鉄貝塚線　千早駅　徒歩17分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区松崎4丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo05.jpg" alt="">
              <h4>福岡市東区高美台4丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　154.13㎡<br />（46.62坪）予約有<br />2号地　165.01㎡<br />（49.91坪）<br />3号地　165.01㎡<br />（49.91坪）<br />4号地　ご成約済<br />5号地　165.00㎡<br />（49.91坪）<br />6号地　154.14㎡<br />（46.62坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　高美台四丁目停　徒歩3分<br />JR鹿児島本線　福工大前駅　徒歩18分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区高美台4丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo06.jpg" alt="福岡市南区西長住3丁目">
              <h4>福岡市南区西長住3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　228.00㎡<br />（68.97坪）予約有<br />2号地　173.00㎡<br />（52.33坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　桜町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo07.jpg" alt="福岡市南区西長住3丁目">
              <h4>福岡市南区西長住3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　228.00㎡<br />（68.97坪）予約有<br />2号地　173.00㎡<br />（52.33坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　桜町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo08.jpg" alt="福岡市南区若久2丁目">
              <h4>福岡市南区若久2丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　188.36㎡<br />（56.97坪）※有効面積<br />4号地　175.18㎡<br />（52.99坪)※有効面積</dd>
                <dt>交通</dt>
                <dd>西鉄大牟田線　大橋駅　徒歩17分<br />西鉄バス　若久団地第二停　徒歩3分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区若久2丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo09.jpg" alt="福岡市南区長丘5丁目">
              <h4>福岡市南区長丘5丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　187.78㎡<br />（56.80坪）予約有</dd>
                <dt>交通</dt>
                <dd>西鉄バス　長丘五丁目一区停　徒歩2分<br />西鉄バス　下長尾停　徒歩4分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo10.jpg" alt="福岡市南区野多目1丁目">
              <h4>福岡市南区野多目1丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　140.02㎡<br />（42.35坪）<br />2号地　140.02㎡<br />（42.35坪）<br />3号地　165.83㎡<br />（50.16坪）<br />4号地　165.83㎡<br />（50.16坪）予約有<br />5号地　143.00㎡<br />（43.25坪）<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　向新町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo11.jpg" alt="福岡市南区若久2丁目">
              <h4>福岡市南区若久2丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　154.21㎡<br />（46.64坪）<br />3号地　151.93㎡<br />（45.95坪）予約有<br />4号地　139.33㎡<br />（42.14坪）<br />5号地　ご成約済<br />6号地　ご成約済<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　緑園前停　徒歩4分<br />西鉄天神大牟田線　大橋駅　徒歩22分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo12.jpg" alt="福岡市南区曰佐1丁目">
              <h4>福岡市南区曰佐1丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　147.96㎡<br />（44.75坪）<br />2号地　167.35㎡<br />（50.62坪）<br />3号地　169.91㎡<br />（51.39坪）<br />4号地　140.64㎡<br />（42.54坪）<br />5号地　154.32<br />（46.68坪）<br />6号地　149.16㎡<br />（45.12坪）予約有<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　曰佐二丁目停　徒歩5分<br />西鉄バス　的場一丁目停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
          </ul>

          <div class="menu_btn loadarea">
            <a href="#" id="loadmore">さらに読み込む</a>
          </div>

Comments

[yambejp]

２列ずつという命題と、サンプルの画像があってないように見えますが？

[oyu]

画像は表示できたのですが画像とは別に要素を表示したいのですが表示できません。
どうすればいいでしょうか？

[yambejp]

具体的に２列ずつとはどうなればいいのか図示したほうがよいでしょう

[oyu]

具体的ですがさらに読み込むボタンをクリックすればコンテンツ2列づつ表示させたいです。
現在はbunjo_boxが6つ表示させています。
さらに読み込むボタンをクリックすれば残りの6つのコンテンツを表示させたいです。

2列づつ表示させたいコードになります。

<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo07.jpg" alt="福岡市南区西長住3丁目">
<h4>福岡市南区西長住3丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　228.00㎡<br />（68.97坪）予約有<br />2号地　173.00㎡<br />（52.33坪）</dd>
<dt>交通</dt>
<dd>西鉄バス　桜町停　徒歩5分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>
<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo08.jpg" alt="福岡市南区若久2丁目">
<h4>福岡市南区若久2丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　188.36㎡<br />（56.97坪）※有効面積<br />4号地　175.18㎡<br />（52.99坪)※有効面積</dd>
<dt>交通</dt>
<dd>西鉄大牟田線　大橋駅　徒歩17分<br />西鉄バス　若久団地第二停　徒歩3分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市南区若久2丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>
<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo09.jpg" alt="福岡市南区長丘5丁目">
<h4>福岡市南区長丘5丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　187.78㎡<br />（56.80坪）予約有</dd>
<dt>交通</dt>
<dd>西鉄バス　長丘五丁目一区停　徒歩2分<br />西鉄バス　下長尾停　徒歩4分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>
<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo10.jpg" alt="福岡市南区野多目1丁目">
<h4>福岡市南区野多目1丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　140.02㎡<br />（42.35坪）<br />2号地　140.02㎡<br />（42.35坪）<br />3号地　165.83㎡<br />（50.16坪）<br />4号地　165.83㎡<br />（50.16坪）予約有<br />5号地　143.00㎡<br />（43.25坪）<br /></dd>
<dt>交通</dt>
<dd>西鉄バス　向新町停　徒歩5分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>
<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo11.jpg" alt="福岡市南区若久2丁目">
<h4>福岡市南区若久2丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　ご成約済<br />2号地　154.21㎡<br />（46.64坪）<br />3号地　151.93㎡<br />（45.95坪）予約有<br />4号地　139.33㎡<br />（42.14坪）<br />5号地　ご成約済<br />6号地　ご成約済<br /></dd>
<dt>交通</dt>
<dd>西鉄バス　緑園前停　徒歩4分<br />西鉄天神大牟田線　大橋駅　徒歩22分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>
<li class="bunjo_box">
<h3>福岡市南区</h3>
<img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo12.jpg" alt="福岡市南区曰佐1丁目">
<h4>福岡市南区曰佐1丁目</h4>
<dl>
<dt>土地面積</dt>
<dd>1号地　147.96㎡<br />（44.75坪）<br />2号地　167.35㎡<br />（50.62坪）<br />3号地　169.91㎡<br />（51.39坪）<br />4号地　140.64㎡<br />（42.54坪）<br />5号地　154.32<br />（46.68坪）<br />6号地　149.16㎡<br />（45.12坪）予約有<br /></dd>
<dt>交通</dt>
<dd>西鉄バス　曰佐二丁目停　徒歩5分<br />西鉄バス　的場一丁目停　徒歩5分</dd>
</dl>
<div class="bunjo_links">
<a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
<a href="" class="btn_link">詳しく見る</a>
</div>
</li>

[yambejp]

何がどう2列なのか説明が不十分ですが、6個データがあって
なにか押すとその6個が消えて（？）次の6個を表示するのでしょうか？
（追加して？）
次の6個は何処からもってくるのですか？

[退会済みユーザー]

コードが２行３列です

[oyu]

その通りです。
jQueryで表示させることはできないでしょうか？

Answer 1

一例ですが、display:noneとするクラスをあらかじめ用意しておき、
ボタンを押した時にこのクラスを外す方法だとシンプルにできると思いますが、
いかがでしょうか。

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<ul class="bunjo_wrap">
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo01.jpg" alt="福岡市東区美和台3丁目">
              <h4>福岡市東区美和台3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>
                  1号地　170.33㎡<br>（51.52坪）<br>2号地　170.34㎡<br>（51.52坪）予約有
                </dd>
                <dt>交通</dt>
                <dd>
                  西鉄バス　　三苫駅停　徒歩4分<br />西鉄貝塚線　三苫駅　　徒歩4分
                </dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo02.jpg" alt="">
              <h4>福岡市東区舞松原3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　161.35㎡<br />（48.80坪）</dd>
                <dt>交通</dt>
                <dd>
                  西鉄バス　若宮4丁目バス停　徒歩3分<br />JR香椎線　舞松原駅　徒歩12分<br />鹿児島本線　千早駅　徒歩15分
                </dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区舞松原3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo03.jpg" alt="福岡市東区松崎4丁目">
              <h4>福岡市東区舞松原3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　161.35㎡<br />（48.80坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　若宮4丁目バス停　徒歩3分<br />JR香椎線　舞松原駅　徒歩12分<br />鹿児島本線　千早駅　徒歩15分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo04.jpg" alt="">
              <h4>福岡市東区松崎4丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　193.40㎡<br />（58.50坪）<br />4号地　192.66㎡<br />（58.27坪）</dd>
                <dt>交通</dt>
                <dd>JR鹿児島本線　千早駅　徒歩12分<br />西鉄貝塚線　千早駅　徒歩17分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区松崎4丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市東区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo05.jpg" alt="">
              <h4>福岡市東区高美台4丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　154.13㎡<br />（46.62坪）予約有<br />2号地　165.01㎡<br />（49.91坪）<br />3号地　165.01㎡<br />（49.91坪）<br />4号地　ご成約済<br />5号地　165.00㎡<br />（49.91坪）<br />6号地　154.14㎡<br />（46.62坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　高美台四丁目停　徒歩3分<br />JR鹿児島本線　福工大前駅　徒歩18分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区高美台4丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo06.jpg" alt="福岡市南区西長住3丁目">
              <h4>福岡市南区西長住3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　228.00㎡<br />（68.97坪）予約有<br />2号地　173.00㎡<br />（52.33坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　桜町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo07.jpg" alt="福岡市南区西長住3丁目">
              <h4>福岡市南区西長住3丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　228.00㎡<br />（68.97坪）予約有<br />2号地　173.00㎡<br />（52.33坪）</dd>
                <dt>交通</dt>
                <dd>西鉄バス　桜町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo08.jpg" alt="福岡市南区若久2丁目">
              <h4>福岡市南区若久2丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　ご成約済<br />3号地　188.36㎡<br />（56.97坪）※有効面積<br />4号地　175.18㎡<br />（52.99坪)※有効面積</dd>
                <dt>交通</dt>
                <dd>西鉄大牟田線　大橋駅　徒歩17分<br />西鉄バス　若久団地第二停　徒歩3分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区若久2丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo9.jpg" alt="福岡市南区長丘5丁目">
              <h4>福岡市南区長丘5丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　187.78㎡<br />（56.80坪）予約有</dd>
                <dt>交通</dt>
                <dd>西鉄バス　長丘五丁目一区停　徒歩2分<br />西鉄バス　下長尾停　徒歩4分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo10.jpg" alt="福岡市南区野多目1丁目">
              <h4>福岡市南区野多目1丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　140.02㎡<br />（42.35坪）<br />2号地　140.02㎡<br />（42.35坪）<br />3号地　165.83㎡<br />（50.16坪）<br />4号地　165.83㎡<br />（50.16坪）予約有<br />5号地　143.00㎡<br />（43.25坪）<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　向新町停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo11.jpg" alt="福岡市南区若久2丁目">
              <h4>福岡市南区若久2丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　ご成約済<br />2号地　154.21㎡<br />（46.64坪）<br />3号地　151.93㎡<br />（45.95坪）予約有<br />4号地　139.33㎡<br />（42.14坪）<br />5号地　ご成約済<br />6号地　ご成約済<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　緑園前停　徒歩4分<br />西鉄天神大牟田線　大橋駅　徒歩22分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
            <li class="bunjo_box bunjo_box--hidden">
              <h3>福岡市南区</h3>
              <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo12.jpg" alt="福岡市南区曰佐1丁目">
              <h4>福岡市南区曰佐1丁目</h4>
              <dl>
                <dt>土地面積</dt>
                <dd>1号地　147.96㎡<br />（44.75坪）<br />2号地　167.35㎡<br />（50.62坪）<br />3号地　169.91㎡<br />（51.39坪）<br />4号地　140.64㎡<br />（42.54坪）<br />5号地　154.32<br />（46.68坪）<br />6号地　149.16㎡<br />（45.12坪）予約有<br /></dd>
                <dt>交通</dt>
                <dd>西鉄バス　曰佐二丁目停　徒歩5分<br />西鉄バス　的場一丁目停　徒歩5分</dd>
              </dl>
              <div class="bunjo_links">
                <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a>
                <a href="" class="btn_link">詳しく見る</a>
              </div>
            </li>
          </ul>

          <div class="menu_btn loadarea">
            <a href="#" id="loadmore">さらに読み込む</a>
          </div>

.bunjo_wrap {
  display: flex;
  flex-wrap: wrap;
}

.bunjo_box {
  width: 33.33%;
}

.bunjo_box--hidden {
  display: none;
}

$('#loadmore').on('click', (e) => {
  e.preventDefault();
  let target = $('.bunjo_box--hidden');
  for (let i = 0; i < 6 ; i++) {
    if (target.eq(i).length > 0) {
      target.eq(i).removeClass('bunjo_box--hidden');
    } else {
      break;
    }
  }
});

https://codepen.io/guklgotw/pen/ZEGvjaN

Comments

[oyu]

コードまで書いていただきありがとうございます。
https://codepen.io/guklgotw/pen/ZEGvjaN
思い描いていた実装です。
誠にありがとうございます。

さらに読み込むボタンをクリックしたのですが読み込みません。
どのようにすればいいでしょうか？

[oyu]

追加したcssコードになります。
.menu-page-container #menu-page .inner ul.bunjo_wrap {
max-width: 860px;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box {
padding: 15px 15px 130px;
margin: 0 0 20px;
width: calc(33.33% - 20px);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
background: #fff;
box-sizing: border-box;
position: relative;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap .bunjo_box--hidden {
display: none;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box h3 {
font-size: 24px;
}

@media (max-width: 768px) {
.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box h3 {
font-size: 16px;
}
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box h4 {
font-weight: normal;
}

@media (min-width: 1024px) {
.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box h4 {
font-size: 18px;
margin: 5px 0;
}
}

@media (min-width: 1024px) {
.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box dl {
font-size: 14px;
}
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box dl dt {
background: #ccc;
text-align: center;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box dl dd {
padding: 5px 0;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box .bunjo_links {
position: absolute;
left: 15px;
bottom: 15px;
width: calc(100% - 30px);
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box .bunjo_links .btn_link {
display: block;
color: #fff;
background: #161427;
padding: 15px 0;
margin: 5px 0 0;
font-size: 18px;
width: 100%;
text-align: center;
text-decoration: none;
line-height: 1;
transition: .3s;
box-sizing: border-box;
border: #161427 solid 1px;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box .bunjo_links .btn_link:hover {
background: #fff;
color: #161427;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box .bunjo_links .btn_pamph {
background: #ffa800;
border: none;
}

.menu-page-container #menu-page .inner ul.bunjo_wrap li.bunjo_box .bunjo_links .btn_pamph:hover {
background: #362e2d;
color: #ffa800;
}

[kokemomo.sour]

<li class="bunjo_box bunjo_box--hidden">をHTML側に望む数だけ持たせることになります。

動的にサーバーから記事一覧を問い合わせたい場合、jQueryだけで実装することは難しくなります。

[oyu]

お返事が遅れすみません。
こちらのサイトのような動きにしたいのですが難しいでしょうか？
https://www.d-a-h.com/feature/bkn1911/
+MOREボタンをクリックすれば表示されます。

[kokemomo.sour]

なるほどですね！
ちなみにこちらのサイトのJS、minifyされずにアップされているので
以下から参照することが可能です。
https://www.d-a-h.com/feature/bkn1911/js/script.js
（// btn_more以下が該当箇所です）
こちらを参照してみてはいかがでしょう。

[oyu]

kokemomo.sour様に作っていただいたjQueryのコードで動きました。
動かなかった原因ですがfunctionが抜けていたことで起動しなかったです。
すみませんでした。
$(function(){

});

[kokemomo.sour]

よかったです。

[oyu]

こちらのjQueryのコードですが
参考にしたサイトとかあるのでしょうか？

$('#loadmore').on('click', (e) => {
e.preventDefault();
let target = $('.bunjo_box--hidden');
for (let i = 0; i < 6 ; i++) {
if (target.eq(i).length > 0) {
target.eq(i).removeClass('bunjo_box--hidden');
} else {
break;
}
}
});

[kokemomo.sour]

いえ、一から書きました。

[oyu]

凄いです。
ありがとうございます。
jQueryのスキルを高めたいです。

[kokemomo.sour]

ありがとうございます。
また何かあれば質問投げてください。

[oyu]

もう一点だけお聞きしたいのですが、
jQueryのスキルを高める参考書もしくはサイトとかありますでしょうか？

[kokemomo.sour]

いえ、申し訳ないのですが私自身JQueryを体系的に学んだわけでなく。。
必要に応じてメソッドをググる、DeveloperToolのコンソールで試してみる、の繰り返しで良いと思いますよ。

[oyu]

必要に応じてメソッドを調べられてコードを組み込んだのですね。
DeveloperToolのコンソールを試してみます。
詳しく教えていただきありがとうございました。
またどうぞよろしくお願いいたします。