mehr Taste

Question

Ich habe diesen Abschnitt mit Bootstrap SQLserver und PHP erstellt ...

Gibt es eine Möglichkeit nur ein wenig davon angezeigt wird und gibt der Schaltfläche Weitere Option Ansicht, die das gesamte Ergebnis anzuzeigen?

Es gibt wie 10 Decks, und ich möchte beispiels sidplay nur 2, und wenn Benutzer klickt Mehr Alle von ihnen angezeigt werden soll.

Dies ist mein PHP-Code für dieses Ergebnis.

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

Ich habe versucht, die Bootstrap setzen mehr Schaltfläche hinzufügen, sondern am Ende des Abschnitts angezeigt, nachdem der gesamte Inhalt geladen wird, und ist sinnlos

Answer 1

Das folgende Beispiel zeigt, wie Sie zusätzliche versteckte Gegenstände offenbaren könnten eins nach dem anderen. Sie müssen die JavaScript-Bibliothek von jQuery verwenden, damit dies funktioniert.

$('#viewmore').on('click', function(){ 
 
\t $('.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>