Add view more button

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