###前提・実現したいこと
初期表示→ワードプレスのループを使って.boxed-whiteを6BOX表示
もっと見るボタン押す→3BOXずつ表示したい
□ □ □
□ □ □
もっと見る
↓
□ □ □
□ □ □
□ □ □
もっと見る
###発生している問題・エラーメッセージ
投稿ボックスが全部出た状態になっています。
###該当のソースコード
<script> jQuery( '.show_box:gt(2)' ).addClass( 'show_box_hide' ).hide(); jQuery( '.more' ).on( 'click', function() { jQuery( '.show_box_hide:lt(3)').removeClass( 'show_box_hide' ).slideDown( 'fast' ); if ( jQuery( '.show_box.show_box_hide' ).length === 0 ) { jQuery( '.more' ).hide(); } } ); */jQuery(function(){ jQuery('.show_box:not(.show_box:first-of-type)').css('display','none'); jQuery('.more').nextAll('.more').css('display','none'); jQuery('.more').on('click', function() { jQuery(this).css('display','none'); jQuery(this).next('.show_box').slideDown('fast'); jQuery(this).nextAll('.more:first').css('display','block'); }); });*/ </script> <style> #visual_event{ width: 100%; height: 100%; background: url(images/bg-white-brick.jpg) repeat; } #visual_event .boxed-white { widht: 100%; background: #fff; padding: 15px; margin-bottom: 30px; } #visual_event h5 a{ text-decoration: none; font-size: 17px; line-height: 1.7; margin-top: 8px; font-weight: bold; } #visual_event h5 a{ color: #888; margin: 15px 0 !important; } #visual_event i{ position: relative; right: 3px; top: 3px; } #visual_event .event-more-box a{ font-size: 13px; color: #fff; font-weight: bold; height: 50px; line-height: 50px; background: #999; text-decoration: none; display: block; margin-bottom: -10px; } #visual_event .event-more-box a:hover{ color: #999; background: #fff; border: 1px solid #999; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s; } #visual_event .visual-img img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } #visual_event .box-more{ cursor: pointer; font-size: 18px; color: #909090; font-weight: bold; padding: 10px 0; background: -moz-linear-gradient(top,#FFF 0%,#EEE); background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE)); border: 1px solid #aaa; } </style> <!-- visual_event --> <section id="visual_event" class="top_bottom_margin bg-gray"> <div class="visual_margin container"> <div class="row"> <?php $my_query = new WP_Query( 'category_name=event' ); ?> <?php if ( $my_query->have_posts() ) :while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <!-- show_box --> <div class="show_box"> <!-- boxed-white --> <div class="col-xs-12 col-md-4"> <div class="boxed-white"> <p class="visual-img"> <?php if(has_post_thumbnail()) { echo the_post_thumbnail( 'list-thumbnail' ); } ?> </p> <h5 class="text-center"><a href="<?php the_permalink(); ?>"> <?php if(mb_strlen($post->post_title, 'UTF-8')>16){ $title= mb_substr($post->post_title, 0, 16, 'UTF-8'); echo $title.'…'; }else{ echo $post->post_title; } ?> </a></h5> <hr class="boxed-grey-diagonal"> <?php the_excerpt(); ?> <p class="event-more-box text-center"><a href="<?php the_permalink(); ?>"> <i class="fa fa-angle-double-right fa-2x"></i> READ MORE | 詳細を見る</a></p> </div> </div> <!-- boxed-white --> </div> <!-- show_box --> <?php endwhile; /* ボタンをループから外す */ ?> <!-- もっと見る --> <div class="more"> <div class="col-md-12"> <p class="box-more text-center">もっと見る</p> </div> </div> <!-- もっと見る --> <?php else: ?> <p>記事はありません</p> <?php endif; ?> </div> </div> </section> <!-- visual_event ********************************************************************↑-->
###試したこと
ご親切に教えていただいたものを参考にさせていただき、
格闘中です。。。
###補足情報(言語/FW/ツール等のバージョンなど)
ワードプレスを仕様 HTML5 bootstrap
回答2件
あなたの回答
tips
プレビュー