dqotv26286
dqotv26286
2017-09-05 12:43

添加查看更多按钮

已采纳

I have this section created by bootstrap SQLserver and php...

Is there any way to display just a little of it and give the view more button option to display the whole result?

enter image description here

There are like 10 Decks, and I want e.g to sidplay just 2 and when user clicks View More to display all of them.

This is my php code for that result.

<div class="vertical-wrapper">
<?php 
for($i=0;$i<count($decks);$i++){
   $deck_name = $decks[$i]['name'];
   $deck_desc = $decks[$i]['description'];                                        
   $deck_img_link = $json['deckplans'][$i]['images'][0]['href'];
  echo "<img class='bd-imagelink-157 bd-own-margins bd-imagestyles' src='$deck_img_link'><p class='bd-textblock-779 bd-content-element'>$deck_name</p>";
   echo $deck_desc;
 }
?>
</div>

I tried to put the bootstrap add more button but is displayed in the end of the section,after all content is loaded, and is pointless

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dounue6984 dounue6984 4年前

    The following example demonstrates how you might reveal additional hidden items one at a time. You will need to use the jQuery JavaScript library for this to work.

    $('#viewmore').on('click', function(){
        $('.item:hidden').show();
    })
    .hidden {
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="item">
    ITEM 1
    </div>
    <div class="item hidden">
    ITEM 2
    </div>
    <div class="item hidden">
    ITEM 3
    </div>
    <div class="item hidden">
    ITEM 4
    </div>
    <button id="viewmore">
    View More
    </button>
    </button>

    </div>
    
    点赞 评论 复制链接分享