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>
    点赞 评论 复制链接分享
提交

为你推荐