如何顯示列表中的兩個項目並摺疊其他項目？

Question

我會有從後臺生成的列表：

<ul> 
{% for element in elements %} 
    <li>{{element }}</li> 
{% endfor %} 
</ul> 

我想只顯示兩個第一項和摺疊等（可能帶有鏈接「查看所有」點擊時顯示我的項目的其餘部分）

這是可能的嗎？

Answer 1

$(function(){ 
 
var limit = 1; 
 

 
    $(".list-group-item").each(function(i) { 
 
     if (i <= limit) { 
 
      $(this).addClass('show'); 
 
     }else{ 
 
     \t $(this).addClass('add-more'); 
 
     } 
 
     $(this).not('.show').hide(); 
 
     }); 
 

 
}) 
 

 
    $('.see-emails').click(function() { 
 
    \t $('.add-more').show(); 
 
    $('a').hide(); 
 
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<div id="collapseListGroup1"> 
 
    <ul class="list-group"> 
 

 
    <li class="list-group-item"> email1 </li> 
 
    <li class="list-group-item"> email2 </li> 
 
    <li class="list-group-item"> email3 </li> 
 
    <li class="list-group-item"> email4 </li> 
 
    <li class="list-group-item"> email 5</li> 
 
    </ul> 
 
</div> 
 
<a class="collapsed see-emails" > 
 
      See Emails 
 
     </a>