添加查看更多按钮

Question

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?

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

Answer 1

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>