'Montrer plus' & 'Montrer moins' avec jQuery pour un site web article

Question

J'essaie d'afficher une ligne supplémentaire d'articles lorsque l'utilisateur clique sur 'afficher plus' et que je veux supprimer cette ligne avec 'montrer moins'.

J'ai 4 lignes d'articles, mais je veux commencer avec 2 lignes et demander à l'utilisateur d'ajouter une ligne à la fois.
Mon jQuery peut être un peu foiré parce que j'ai pris des morceaux de différents endroits.
J'ai simplifié le code en supprimant le contenu.

Une idée de pourquoi cela ne fonctionne pas?

<div class="writing-clips"> 
    <div class="row"> 
    <h2>Writing Clips</h2> 
    </div> 
    <div class="row clip-container li"> 
    <div class="col span-1-of-4 box" id="story-1" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    <div class="col span-1-of-4 box" id="story-2"> 
     <a href="#"> 
     content 
     </a> 
    </div>   
    </div> 
    <div class="row clip-container clips-2 li"> 
    <div class="col span-1-of-4 box" id="story-5" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    <div class="col span-1-of-4 box" id="story-6" href="#"> 
     <a href="#"> 
     content  
     </a> 
    </div> 
    </div> 
    <div class="row clip-container clips-3 li"> 
    <div class="col span-1-of-4 box" id="story-9" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    <div class="col span-1-of-4 box" id="story-10" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    </div> 
    <div class="row clip-container clips-4 li"> 
    <div class="col span-1-of-4 box" id="story-13" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    <div class="col span-1-of-4 box" id="story-14" href="#"> 
     <a href="#"> 
     content 
     </a> 
    </div> 
    </div> 
    </section> 
<div class="showmore">showmore</div> 
<div class="showless">showless</div> 

jquery:

$(document).ready(function(){ 

    size_li = $(".writing-clips .li").size(); 
    x=2; 
    $('.writing-clips .li:lt('+x+')').show(); 
    $('.showmore').click(function() { 
    x= (x+1 <= size_li) ? x+1 : size_li; 
    $('.writing-clips .li:lt('+x+')').show(); 
    }); 
    $('.showless').click(function() { 
    x=(x-1<2) ? 2 : x-1; 
    $('.writing-clips .li').not(':lt('+x+')').hide(); 
    }); 

}); 

css:

.writing-clips .li { display: none; } 

.showmore { 
    cursor: pointer; 
    color: green; 
} 

.showmore:hover { color: blue; } 

.showless { 
    color: red; 
    cursor: pointer; 
} 

.showless: hover {color: blue; }

Answer 1

Vous devez cacher toutes les lignes avant montrent deux premiers

Ajouter cette ligne

$('.writing-clips .li').hide(); 

avant

$('.writing-clips .li:lt('+x+')').show(); 

Answer 2

C'est ici: https://codepen.io/anon/pen/PmgoyJ?editors=1011

CHANGEMENTS:

<div class="add-row">Add a Row</div> 

size_li = $(".writing-clips .li").length; 
... 
... 
$('.add-row').click(function() { 
size_li = $(".writing-clips .li").length; 
var lastStoryId=$('.writing-clips .li:last-child .col:last-child').attr('id').split('').reverse().join(''); 
var lastStoryNum=parseInt(lastStoryId.slice(0,lastStoryId.indexOf('-')).split('').reverse().join('')); 
var newRow=$('<div class="row clip-container clips-'+(size_li+1)+' li">' 
     +'<div class="col span-1-of-4 box" id="story-'+(lastStoryNum+1)+'" href="#">' 
      +'<a href="#">content</a>' 
     +'</div>' 
     +'<div class="col span-1-of-4 box" id="story-'+(lastStoryNum+2)+'" href="#">' 
      +'<a href="#">content</a>' 
     +'</div>' 
    +'</div>'); 
$('.writing-clips').append(newRow); 

});

Answer 3

J'ai réécrites votre script ...

Le présent est d'effectuer la comparaison correcte et incrémenter un compteur qui représentent combien sont effectivement montré.

Voir les journaux de la console et les commentaires dans le code.

$(document).ready(function(){ 
 
    
 
    // Show first four. 
 
    var shownOnload = 4; 
 
    for(i=0;i<shownOnload;i++){ 
 
    $(".col").eq(i).show(); 
 
    } 
 
    
 
    // Total link we have 
 
    var size_li = $(".col").length; 
 
    console.log(" Total: " +size_li); 
 

 
    // More handler 
 
    $(".showmore").click(function() { 
 
    console.log("More clicked!"); 
 
    
 
    if(shownOnload<size_li && shownOnload>=0){ 
 
     shownOnload++; 
 
     console.log("Show #"+shownOnload); 
 
     $(".col").eq(shownOnload-1).show(); 
 
    } 
 
    }); 
 
    
 
    // Less handler 
 
    $(".showless").click(function() { 
 
    console.log("Less clicked!"); 
 
    
 
    if(shownOnload<=size_li && shownOnload>0){ 
 
     console.log("Hide #"+shownOnload); 
 
     $(".col").eq(shownOnload-1).hide(); 
 
     shownOnload--; 
 
    } 
 
    }); 
 

 
}); // ready

.col{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="writing-clips"> 
 
    <div class="row"> 
 
    <h2>Writing Clips</h2> 
 
    </div> 
 
    <div class="row clip-container li"> 
 
    <div class="col span-1-of-4 box" id="story-1" href="#"> 
 
     <a href="#"> 
 
     content 1 
 
     </a> 
 
    </div> 
 
    <div class="col span-1-of-4 box" id="story-2"> 
 
     <a href="#"> 
 
     content 2 
 
     </a> 
 
    </div>   
 
    </div> 
 
    <div class="row clip-container clips-2 li"> 
 
    <div class="col span-1-of-4 box" id="story-5" href="#"> 
 
     <a href="#"> 
 
     content 3 
 
     </a> 
 
    </div> 
 
    <div class="col span-1-of-4 box" id="story-6" href="#"> 
 
     <a href="#"> 
 
     content 4 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="row clip-container clips-3 li"> 
 
    <div class="col span-1-of-4 box" id="story-9" href="#"> 
 
     <a href="#"> 
 
     content 5 
 
     </a> 
 
    </div> 
 
    <div class="col span-1-of-4 box" id="story-10" href="#"> 
 
     <a href="#"> 
 
     content 6 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="row clip-container clips-4 li"> 
 
    <div class="col span-1-of-4 box" id="story-13" href="#"> 
 
     <a href="#"> 
 
     content 7 
 
     </a> 
 
    </div> 
 
    <div class="col span-1-of-4 box" id="story-14" href="#"> 
 
     <a href="#"> 
 
     content 8 
 
     </a> 
 
    </div> 
 
    </div> 
 
    </section> 
 
<div class="showmore">showmore</div> 
 
<div class="showless">showless</div>