JQuery Show Hide Multiple Div Button

Question

Мне нужно разработать страницу новостей с 3 статьями, которые могут быть скрыты или показаны один за другим, с помощью 2 кнопок: «Показать больше новостей» и «Показать меньше новостей» Каждая статья должна скрыть/отобразить, нажав соответствующую кнопку только один раз, начиная с последней статьи (внизу страницы) до первой (вверху страницы). HTML:

<!-- Articles--> 
<article id="art-1" class="row" >My first Art</article> 
<article id="art-2" class="row art" >My second Art</article> 
<article id="art-3" class="row art" >My last Art</article> 

<!--Buttons--> 
<button class="button-grey" id="show-less-news1">Show Less</button> 
<button class="button-grey" id="show-less-news2">Show Less</button> 
<button class="button-grey" id="show-less-news3">Show Less</button> 
<button class="button-grey" id="show-more-news1">Show More</button> 
<button class="button-grey" id="show-more-news2">Show More</button> 
<button class="button-grey" id="show-more-news3">Show More</button> 

мне удалось сделать это с помощью JQuery, но код очень многословным и мне нужно 6 кнопок, а не 2, но я считаю, что должно быть проще способ, чтобы получить тот же результат с менее сложным кодом , Это код JQuery:

$("#show-more-news1").css({display:'none'}); 
$("#show-more-news2").css({display:'none'}); 
$("#show-more-news3").css({display:'none'}); 
$("#show-less-news1").css({display:'none'}); 
$("#show-less-news2").css({display:'none'}); 
    //function 1 less 
$("#show-less-news3").click(function(){ 
$("#art-3").hide(400); 
$("#show-less-news3").hide(); 
$("#show-more-news3").show(); 
$("#show-less-news2").show(); 
}); 
    //function 2 less 
$("#show-less-news2").click(function(){ 
$("#art-2").hide(400); 
$("#show-less-news2").hide(); 
$("#show-more-news3").hide(); 
$("#show-less-news1").show(); 
$("#show-more-news2").show(); 
}); 
    //function 3 more 
$("#show-more-news3").click(function(){ 
$("#art-3").show(400); 
$("#show-more-news3").hide(); 
$("#show-less-news2").hide(); 
$("#show-less-news3").show(); 
}); 
    //function 3 less 
$("#show-less-news1").click(function(){ 
$("#art-1").hide(400); 
$("#show-less-news1").hide(); 
$("#show-more-news2").hide(); 
$("#show-more-news1").show(); 
}); 
    //function 2 more 
$("#show-more-news2").click(function(){ 
$("#art-2").show(400); 
$("#show-more-news2").hide(); 
$("#show-less-news1").hide(); 
$("#show-less-news2").show(); 
$("#show-more-news3").show(); 
}); 
    //function 1 more 
$("#show-more-news1").click(function(){ 
$("#art-1").show(400); 
$("#show-more-news1").hide(); 
$("#show-less-news1").show(); 
$("#show-more-news2").show(); 
}); 

Некоторые CSS:

article { 
    position: realtive; 
    width: 100%; 
    height: 50px; 
    border: 1px solid red; 
    float:left; 
    background-color: yellow; 
} 
.button-grey { 
    display: block; 
    background-color: #cfcfcf; 
    width: 150px; 
    height: 30px; 
    float:right; 
} 

Вот CodePen. Может ли кто-нибудь помочь мне получить тот же результат с лучшим кодом? Спасибо большое!

Answer 1

Используя свой HTML только две кнопки и идентичного CSS Следующая JS работает лучше для меня:

Javascript: 


var newsDepth = 3; 
var maxNewsDepth = 3; 

$('#show-more-news').hide(); 


$('#show-more-news').click(function() { 
    (newsDepth < maxNewsDepth) && newsDepth++; 
    $('#art-' + newsDepth).show(); 
    $('#show-less-news').show(); 
    if (newsDepth == maxNewsDepth) $('#show-more-news').hide(); 
}); 

$('#show-less-news').click(function() { 
    (newsDepth > 1) && newsDepth--; 
    $('#art-' + (newsDepth + 1)).hide(); 
    $('#show-more-news').show(); 
    if (newsDepth == 1) $('#show-less-news').hide(); 
}); 

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Articles--> 
<article id="art-1" class="row">My first Art</article> 
<article id="art-2" class="row art">My second Art</article> 
<article id="art-3" class="row art">My last Art</article> 

<!--Buttons--> 
<button class="button-grey" id="show-less-news">Show Less</button> 
<button class="button-grey" id="show-more-news">Show More</button> 

Вот codepen для вас

Answer 2

У меня есть лучшая версия в этом jsfiddle.

HTML:

<!-- Articles--> 
<div id="articles"> 
<article id="art-1" class="row">My first Art</article> 
<article id="art-2" class="row art">My second Art</article> 
<article id="art-3" class="row art">My last Art</article> 
</div> 

<!--Buttons--> 
<button class="button-grey" id="show-less">Show Less</button> 
<button class="button-grey" id="show-more" style="display: none">Show More</button> 

JS:

var allArticles = $('#articles article'); 
var visibleCount = 3; 

$('#show-less').on('click', function() { 
    // no more articles to hide 
    if (visibleCount == 0) return; 
    // hide the previous one 
    $(allArticles[--visibleCount]).hide(); 

    // Show the more button 
    $('#show-more').show(); 
    // hide the less button 
    if (visibleCount == 0) 
     $('#show-less').hide(); 
}); 

$('#show-more').on('click', function() { 
    if (visibleCount == allArticles.length) return; 
    // show the next article 
    $(allArticles[visibleCount++]).show(); 

    // Show the less button 
    $('#show-less').show(); 
    // hide the more button 
    if (visibleCount == allArticles.length) 
     $('#show-more').hide(); 
});