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 ); } });
div{width:200px; height:50px; margin-bottom: 15px ;background: #91d2d0 ;}
<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>