質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1089閲覧

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

oyu

総合スコア48

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/03/23 10:39

前提・実現したいこと

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

イメージ説明

html

1 <ul class="bunjo_wrap"> 2 <li class="bunjo_box"> 3 <h3>福岡市東区</h3> 4 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo01.jpg" alt="福岡市東区美和台3丁目"> 5 <h4>福岡市東区美和台3丁目</h4> 6 <dl> 7 <dt>土地面積</dt> 8 <dd> 9 1号地 170.33㎡<br>(51.52坪)<br>2号地 170.34㎡<br>(51.52坪)予約有 10 </dd> 11 <dt>交通</dt> 12 <dd> 13 西鉄バス  三苫駅停 徒歩4分<br />西鉄貝塚線 三苫駅  徒歩4分 14 </dd> 15 </dl> 16 <div class="bunjo_links"> 17 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 18 <a href="" class="btn_link">詳しく見る</a> 19 </div> 20 </li> 21 <li class="bunjo_box"> 22 <h3>福岡市東区</h3> 23 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo02.jpg" alt=""> 24 <h4>福岡市東区舞松原3丁目</h4> 25 <dl> 26 <dt>土地面積</dt> 27 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 161.35㎡<br />(48.80坪)</dd> 28 <dt>交通</dt> 29 <dd> 30 西鉄バス 若宮4丁目バス停 徒歩3分<br />JR香椎線 舞松原駅 徒歩12分<br />鹿児島本線 千早駅 徒歩15分 31 </dd> 32 </dl> 33 <div class="bunjo_links"> 34 <a href="" class="btn_pamph btn_link" value="福岡市東区舞松原3丁目">資料請求</a> 35 <a href="" class="btn_link">詳しく見る</a> 36 </div> 37 </li> 38 <li class="bunjo_box"> 39 <h3>福岡市東区</h3> 40 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo03.jpg" alt="福岡市東区松崎4丁目"> 41 <h4>福岡市東区舞松原3丁目</h4> 42 <dl> 43 <dt>土地面積</dt> 44 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 161.35㎡<br />(48.80坪)</dd> 45 <dt>交通</dt> 46 <dd>西鉄バス 若宮4丁目バス停 徒歩3分<br />JR香椎線 舞松原駅 徒歩12分<br />鹿児島本線 千早駅 徒歩15分</dd> 47 </dl> 48 <div class="bunjo_links"> 49 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 50 <a href="" class="btn_link">詳しく見る</a> 51 </div> 52 </li> 53 <li class="bunjo_box"> 54 <h3>福岡市東区</h3> 55 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo04.jpg" alt=""> 56 <h4>福岡市東区松崎4丁目</h4> 57 <dl> 58 <dt>土地面積</dt> 59 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 193.40㎡<br />(58.50坪)<br />4号地 192.66㎡<br />(58.27坪)</dd> 60 <dt>交通</dt> 61 <dd>JR鹿児島本線 千早駅 徒歩12分<br />西鉄貝塚線 千早駅 徒歩17分</dd> 62 </dl> 63 <div class="bunjo_links"> 64 <a href="" class="btn_pamph btn_link" value="福岡市東区松崎4丁目">資料請求</a> 65 <a href="" class="btn_link">詳しく見る</a> 66 </div> 67 </li> 68 <li class="bunjo_box"> 69 <h3>福岡市東区</h3> 70 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo05.jpg" alt=""> 71 <h4>福岡市東区高美台4丁目</h4> 72 <dl> 73 <dt>土地面積</dt> 74 <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> 75 <dt>交通</dt> 76 <dd>西鉄バス 高美台四丁目停 徒歩3分<br />JR鹿児島本線 福工大前駅 徒歩18分</dd> 77 </dl> 78 <div class="bunjo_links"> 79 <a href="" class="btn_pamph btn_link" value="福岡市東区高美台4丁目">資料請求</a> 80 <a href="" class="btn_link">詳しく見る</a> 81 </div> 82 </li> 83 <li class="bunjo_box"> 84 <h3>福岡市南区</h3> 85 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo06.jpg" alt="福岡市南区西長住3丁目"> 86 <h4>福岡市南区西長住3丁目</h4> 87 <dl> 88 <dt>土地面積</dt> 89 <dd>1号地 228.00㎡<br />(68.97坪)予約有<br />2号地 173.00㎡<br />(52.33坪)</dd> 90 <dt>交通</dt> 91 <dd>西鉄バス 桜町停 徒歩5分</dd> 92 </dl> 93 <div class="bunjo_links"> 94 <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a> 95 <a href="" class="btn_link">詳しく見る</a> 96 </div> 97 </li> 98 <li class="bunjo_box"> 99 <h3>福岡市南区</h3> 100 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo07.jpg" alt="福岡市南区西長住3丁目"> 101 <h4>福岡市南区西長住3丁目</h4> 102 <dl> 103 <dt>土地面積</dt> 104 <dd>1号地 228.00㎡<br />(68.97坪)予約有<br />2号地 173.00㎡<br />(52.33坪)</dd> 105 <dt>交通</dt> 106 <dd>西鉄バス 桜町停 徒歩5分</dd> 107 </dl> 108 <div class="bunjo_links"> 109 <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a> 110 <a href="" class="btn_link">詳しく見る</a> 111 </div> 112 </li> 113 <li class="bunjo_box"> 114 <h3>福岡市南区</h3> 115 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo08.jpg" alt="福岡市南区若久2丁目"> 116 <h4>福岡市南区若久2丁目</h4> 117 <dl> 118 <dt>土地面積</dt> 119 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 188.36㎡<br />(56.97坪)※有効面積<br />4号地 175.18㎡<br />(52.99坪)※有効面積</dd> 120 <dt>交通</dt> 121 <dd>西鉄大牟田線 大橋駅 徒歩17分<br />西鉄バス 若久団地第二停 徒歩3分</dd> 122 </dl> 123 <div class="bunjo_links"> 124 <a href="" class="btn_pamph btn_link" value="福岡市南区若久2丁目">資料請求</a> 125 <a href="" class="btn_link">詳しく見る</a> 126 </div> 127 </li> 128 <li class="bunjo_box"> 129 <h3>福岡市南区</h3> 130 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo09.jpg" alt="福岡市南区長丘5丁目"> 131 <h4>福岡市南区長丘5丁目</h4> 132 <dl> 133 <dt>土地面積</dt> 134 <dd>1号地 187.78㎡<br />(56.80坪)予約有</dd> 135 <dt>交通</dt> 136 <dd>西鉄バス 長丘五丁目一区停 徒歩2分<br />西鉄バス 下長尾停 徒歩4分</dd> 137 </dl> 138 <div class="bunjo_links"> 139 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 140 <a href="" class="btn_link">詳しく見る</a> 141 </div> 142 </li> 143 <li class="bunjo_box"> 144 <h3>福岡市南区</h3> 145 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo10.jpg" alt="福岡市南区野多目1丁目"> 146 <h4>福岡市南区野多目1丁目</h4> 147 <dl> 148 <dt>土地面積</dt> 149 <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> 150 <dt>交通</dt> 151 <dd>西鉄バス 向新町停 徒歩5分</dd> 152 </dl> 153 <div class="bunjo_links"> 154 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 155 <a href="" class="btn_link">詳しく見る</a> 156 </div> 157 </li> 158 <li class="bunjo_box"> 159 <h3>福岡市南区</h3> 160 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo11.jpg" alt="福岡市南区若久2丁目"> 161 <h4>福岡市南区若久2丁目</h4> 162 <dl> 163 <dt>土地面積</dt> 164 <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> 165 <dt>交通</dt> 166 <dd>西鉄バス 緑園前停 徒歩4分<br />西鉄天神大牟田線 大橋駅 徒歩22分</dd> 167 </dl> 168 <div class="bunjo_links"> 169 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 170 <a href="" class="btn_link">詳しく見る</a> 171 </div> 172 </li> 173 <li class="bunjo_box"> 174 <h3>福岡市南区</h3> 175 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo12.jpg" alt="福岡市南区曰佐1丁目"> 176 <h4>福岡市南区曰佐1丁目</h4> 177 <dl> 178 <dt>土地面積</dt> 179 <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> 180 <dt>交通</dt> 181 <dd>西鉄バス 曰佐二丁目停 徒歩5分<br />西鉄バス 的場一丁目停 徒歩5分</dd> 182 </dl> 183 <div class="bunjo_links"> 184 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 185 <a href="" class="btn_link">詳しく見る</a> 186 </div> 187 </li> 188 </ul> 189 190 <div class="menu_btn loadarea"> 191 <a href="#" id="loadmore">さらに読み込む</a> 192 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/03/23 10:44

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

2020/03/23 10:47

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

2020/03/23 10:56

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

2020/03/23 11:05

具体的ですがさらに読み込むボタンをクリックすればコンテンツ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

2020/03/23 11:21

何がどう2列なのか説明が不十分ですが、6個データがあって なにか押すとその6個が消えて(?)次の6個を表示するのでしょうか? (追加して?) 次の6個は何処からもってくるのですか?
退会済みユーザー

退会済みユーザー

2020/03/23 12:54

コードが2行3列です
oyu

2020/03/24 00:39

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

回答1

0

ベストアンサー

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

HTML

1<script 2 src="https://code.jquery.com/jquery-3.4.1.js" 3 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 4 crossorigin="anonymous"></script> 5 6<ul class="bunjo_wrap"> 7 <li class="bunjo_box"> 8 <h3>福岡市東区</h3> 9 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo01.jpg" alt="福岡市東区美和台3丁目"> 10 <h4>福岡市東区美和台3丁目</h4> 11 <dl> 12 <dt>土地面積</dt> 13 <dd> 14 1号地 170.33㎡<br>(51.52坪)<br>2号地 170.34㎡<br>(51.52坪)予約有 15 </dd> 16 <dt>交通</dt> 17 <dd> 18 西鉄バス  三苫駅停 徒歩4分<br />西鉄貝塚線 三苫駅  徒歩4分 19 </dd> 20 </dl> 21 <div class="bunjo_links"> 22 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 23 <a href="" class="btn_link">詳しく見る</a> 24 </div> 25 </li> 26 <li class="bunjo_box"> 27 <h3>福岡市東区</h3> 28 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo02.jpg" alt=""> 29 <h4>福岡市東区舞松原3丁目</h4> 30 <dl> 31 <dt>土地面積</dt> 32 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 161.35㎡<br />(48.80坪)</dd> 33 <dt>交通</dt> 34 <dd> 35 西鉄バス 若宮4丁目バス停 徒歩3分<br />JR香椎線 舞松原駅 徒歩12分<br />鹿児島本線 千早駅 徒歩15分 36 </dd> 37 </dl> 38 <div class="bunjo_links"> 39 <a href="" class="btn_pamph btn_link" value="福岡市東区舞松原3丁目">資料請求</a> 40 <a href="" class="btn_link">詳しく見る</a> 41 </div> 42 </li> 43 <li class="bunjo_box"> 44 <h3>福岡市東区</h3> 45 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo03.jpg" alt="福岡市東区松崎4丁目"> 46 <h4>福岡市東区舞松原3丁目</h4> 47 <dl> 48 <dt>土地面積</dt> 49 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 161.35㎡<br />(48.80坪)</dd> 50 <dt>交通</dt> 51 <dd>西鉄バス 若宮4丁目バス停 徒歩3分<br />JR香椎線 舞松原駅 徒歩12分<br />鹿児島本線 千早駅 徒歩15分</dd> 52 </dl> 53 <div class="bunjo_links"> 54 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 55 <a href="" class="btn_link">詳しく見る</a> 56 </div> 57 </li> 58 <li class="bunjo_box"> 59 <h3>福岡市東区</h3> 60 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo04.jpg" alt=""> 61 <h4>福岡市東区松崎4丁目</h4> 62 <dl> 63 <dt>土地面積</dt> 64 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 193.40㎡<br />(58.50坪)<br />4号地 192.66㎡<br />(58.27坪)</dd> 65 <dt>交通</dt> 66 <dd>JR鹿児島本線 千早駅 徒歩12分<br />西鉄貝塚線 千早駅 徒歩17分</dd> 67 </dl> 68 <div class="bunjo_links"> 69 <a href="" class="btn_pamph btn_link" value="福岡市東区松崎4丁目">資料請求</a> 70 <a href="" class="btn_link">詳しく見る</a> 71 </div> 72 </li> 73 <li class="bunjo_box"> 74 <h3>福岡市東区</h3> 75 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo05.jpg" alt=""> 76 <h4>福岡市東区高美台4丁目</h4> 77 <dl> 78 <dt>土地面積</dt> 79 <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> 80 <dt>交通</dt> 81 <dd>西鉄バス 高美台四丁目停 徒歩3分<br />JR鹿児島本線 福工大前駅 徒歩18分</dd> 82 </dl> 83 <div class="bunjo_links"> 84 <a href="" class="btn_pamph btn_link" value="福岡市東区高美台4丁目">資料請求</a> 85 <a href="" class="btn_link">詳しく見る</a> 86 </div> 87 </li> 88 <li class="bunjo_box"> 89 <h3>福岡市南区</h3> 90 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo06.jpg" alt="福岡市南区西長住3丁目"> 91 <h4>福岡市南区西長住3丁目</h4> 92 <dl> 93 <dt>土地面積</dt> 94 <dd>1号地 228.00㎡<br />(68.97坪)予約有<br />2号地 173.00㎡<br />(52.33坪)</dd> 95 <dt>交通</dt> 96 <dd>西鉄バス 桜町停 徒歩5分</dd> 97 </dl> 98 <div class="bunjo_links"> 99 <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a> 100 <a href="" class="btn_link">詳しく見る</a> 101 </div> 102 </li> 103 <li class="bunjo_box bunjo_box--hidden"> 104 <h3>福岡市南区</h3> 105 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo07.jpg" alt="福岡市南区西長住3丁目"> 106 <h4>福岡市南区西長住3丁目</h4> 107 <dl> 108 <dt>土地面積</dt> 109 <dd>1号地 228.00㎡<br />(68.97坪)予約有<br />2号地 173.00㎡<br />(52.33坪)</dd> 110 <dt>交通</dt> 111 <dd>西鉄バス 桜町停 徒歩5分</dd> 112 </dl> 113 <div class="bunjo_links"> 114 <a href="" class="btn_pamph btn_link" value="福岡市南区西長住3丁目">資料請求</a> 115 <a href="" class="btn_link">詳しく見る</a> 116 </div> 117 </li> 118 <li class="bunjo_box bunjo_box--hidden"> 119 <h3>福岡市南区</h3> 120 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo08.jpg" alt="福岡市南区若久2丁目"> 121 <h4>福岡市南区若久2丁目</h4> 122 <dl> 123 <dt>土地面積</dt> 124 <dd>1号地 ご成約済<br />2号地 ご成約済<br />3号地 188.36㎡<br />(56.97坪)※有効面積<br />4号地 175.18㎡<br />(52.99坪)※有効面積</dd> 125 <dt>交通</dt> 126 <dd>西鉄大牟田線 大橋駅 徒歩17分<br />西鉄バス 若久団地第二停 徒歩3分</dd> 127 </dl> 128 <div class="bunjo_links"> 129 <a href="" class="btn_pamph btn_link" value="福岡市南区若久2丁目">資料請求</a> 130 <a href="" class="btn_link">詳しく見る</a> 131 </div> 132 </li> 133 <li class="bunjo_box bunjo_box--hidden"> 134 <h3>福岡市南区</h3> 135 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo9.jpg" alt="福岡市南区長丘5丁目"> 136 <h4>福岡市南区長丘5丁目</h4> 137 <dl> 138 <dt>土地面積</dt> 139 <dd>1号地 187.78㎡<br />(56.80坪)予約有</dd> 140 <dt>交通</dt> 141 <dd>西鉄バス 長丘五丁目一区停 徒歩2分<br />西鉄バス 下長尾停 徒歩4分</dd> 142 </dl> 143 <div class="bunjo_links"> 144 <a href="" class="btn_pamph btn_link" value="福岡市東区美和台3丁目">資料請求</a> 145 <a href="" class="btn_link">詳しく見る</a> 146 </div> 147 </li> 148 <li class="bunjo_box bunjo_box--hidden"> 149 <h3>福岡市南区</h3> 150 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo10.jpg" alt="福岡市南区野多目1丁目"> 151 <h4>福岡市南区野多目1丁目</h4> 152 <dl> 153 <dt>土地面積</dt> 154 <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> 155 <dt>交通</dt> 156 <dd>西鉄バス 向新町停 徒歩5分</dd> 157 </dl> 158 <div class="bunjo_links"> 159 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 160 <a href="" class="btn_link">詳しく見る</a> 161 </div> 162 </li> 163 <li class="bunjo_box bunjo_box--hidden"> 164 <h3>福岡市南区</h3> 165 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo11.jpg" alt="福岡市南区若久2丁目"> 166 <h4>福岡市南区若久2丁目</h4> 167 <dl> 168 <dt>土地面積</dt> 169 <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> 170 <dt>交通</dt> 171 <dd>西鉄バス 緑園前停 徒歩4分<br />西鉄天神大牟田線 大橋駅 徒歩22分</dd> 172 </dl> 173 <div class="bunjo_links"> 174 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 175 <a href="" class="btn_link">詳しく見る</a> 176 </div> 177 </li> 178 <li class="bunjo_box bunjo_box--hidden"> 179 <h3>福岡市南区</h3> 180 <img src="<?php echo get_template_directory_uri(); ?>/images/menu/photo12.jpg" alt="福岡市南区曰佐1丁目"> 181 <h4>福岡市南区曰佐1丁目</h4> 182 <dl> 183 <dt>土地面積</dt> 184 <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> 185 <dt>交通</dt> 186 <dd>西鉄バス 曰佐二丁目停 徒歩5分<br />西鉄バス 的場一丁目停 徒歩5分</dd> 187 </dl> 188 <div class="bunjo_links"> 189 <a href="" class="btn_pamph btn_link" value="福岡市南区野多目1丁目">資料請求</a> 190 <a href="" class="btn_link">詳しく見る</a> 191 </div> 192 </li> 193 </ul> 194 195 <div class="menu_btn loadarea"> 196 <a href="#" id="loadmore">さらに読み込む</a> 197 </div>

CSS

1.bunjo_wrap { 2 display: flex; 3 flex-wrap: wrap; 4} 5 6.bunjo_box { 7 width: 33.33%; 8} 9 10.bunjo_box--hidden { 11 display: none; 12}

JavaScript

1$('#loadmore').on('click', (e) => { 2 e.preventDefault(); 3 let target = $('.bunjo_box--hidden'); 4 for (let i = 0; i < 6 ; i++) { 5 if (target.eq(i).length > 0) { 6 target.eq(i).removeClass('bunjo_box--hidden'); 7 } else { 8 break; 9 } 10 } 11});

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

投稿2020/03/23 11:12

編集2020/03/23 11:17
kokemomo.sour

総合スコア330

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyu

2020/03/23 11:30

コードまで書いていただきありがとうございます。 https://codepen.io/guklgotw/pen/ZEGvjaN 思い描いていた実装です。 誠にありがとうございます。 さらに読み込むボタンをクリックしたのですが読み込みません。 どのようにすればいいでしょうか?
oyu

2020/03/23 11:35

追加した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

2020/03/23 11:49

<li class="bunjo_box bunjo_box--hidden">をHTML側に望む数だけ持たせることになります。 動的にサーバーから記事一覧を問い合わせたい場合、jQueryだけで実装することは難しくなります。
oyu

2020/03/23 23:02

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

2020/03/24 01:06

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

2020/03/24 01:13

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

2020/03/24 01:15

こちらの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

2020/03/24 01:16

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

2020/03/24 01:19

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

2020/03/24 01:20

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

2020/03/24 01:24

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

2020/03/24 01:30

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

2020/03/24 01:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問