添加查看更多按钮

Question

我有这个由bootstrap SQLserver和php创建的部分......

有没有办法只显示一点，并给出更多按钮选项以显示整个结果？

有10个Decks，我希望例如只有2个sidplay，当用户点击View More来显示所有这些。

这是我的PHP代码。

<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>

我尝试将引导程序添加更多按钮，但在所有内容加载后显示在该部分的末尾，并且没有意义

Answer 1

以下示例演示了如何一次显示一个隐藏项目。您将需要使用jQuery JavaScript库来实现此目的。

$('#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>