JSFiddle - React, Tailwind, and code Playground

HTML

<div class="news">div 1</div>
<div class="news">div 2</div>
<div class="news">div 3</div>
<div class="news">div 4</div>
<div class="news">div 5</div>
<div class="news">div 6</div>
<a class="archive" href="#"></a>

CSS

div {
  width: 200px;
  height: 50px;
  margin-bottom: 15px;
  background: #91d2d0;
}

JavaScript

var news = 2;
hidenews = "- 表示を隠す";
shownews = "+ 残りを表示する";

$(".archive").html(shownews);
$(".news:not(:lt(" + news + "))").hide();

$(".archive").click(function(e) {
  e.preventDefault();
  if ($(".news:eq(" + news + ")").is(":hidden")) {
    $(".news:hidden").show();
    $(".archive").html(hidenews);
  } else {
    $(".news:not(:lt(" + news + "))").hide();
    $(".archive").html(shownews);
  }
});