Javascript JQuery显示隐藏多个Div按钮

我需要开发一个包含3篇文章的新闻页面，可以通过两个按钮逐个隐藏或显示：“显示更多新闻”和“显示更少新闻” 从最后一篇文章（在页面底部）到第一篇文章（在页面顶部），只需单击一次相关按钮即可隐藏/显示每篇文章。HTML:

一些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;
}

这是一个例子。有人能帮我用更好的代码得到同样的结果吗？

---

非常感谢

我有一个更好的版本

HTML:

---

只使用两个按钮和相同CSS的HTML 以下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();
});

Javascript:
var-newsDepth=3；
var maxNewsDepth=3；
$（“#显示更多新闻”）.hide（）；
$（“#显示更多新闻”）。单击（函数（）{
（newsDepth1）和新闻深度--；
$（“#艺术-”+（新闻深度+1））.hide（）；
$（“#显示更多新闻”）.show（）；
如果（newsDepth==1）$（“#显示较少的新闻”）.hide（）；
});

HTML

对你来说
谢谢，它可以工作，但我需要在文档加载时加载所有文章，在你的代码中只加载第一个艺术，两个按钮都会显示。好的，工作正常，我只需在“show less”函数中将“newsdept”更改为0以隐藏所有艺术。它可以工作，与Tim答案类似，但添加了一个DIV。最后，我需要提高我的JS技能。太多了！
  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;
}

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

    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();
});

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();
});

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