添加查看更多按钮

Question

我有由引导SQLserver和php创建的本节...

有什么办法可以只显示其中一部分，并提供“查看更多”按钮选项以显示整个结果？

大约有10个甲板，我想例如仅对sidplay 2个进行播放，当用户单击“查看更多”以显示所有它们时。

这是我针对该结果的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>

我试图将bootstrap添加更多按钮，但在所有内容加载之后显示在本节的末尾，并且毫无意义

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>