JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <button type="button" onclick="Show()" id="showMore">Show More</button>
    <button type="button" onclick="Hide()" id="hide" style="display:none">Hide</button>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
    <div class="block" style="display:none"></div>
</div>

CSS

#container {
    width:150px;
    margin:auto;
    text-align:center;
}
.block {
    width: 100%;
    margin: 1px;
    height: 30px;
    padding: 3px;
    background-color: grey;
}

JavaScript

function Show() {
    $('div:hidden').slice(0, 4).show();
    $('#hide').show();
}

function Hide() {
    $('.block').hide();
    $('.block:lt(4)').show();
    $('#hide').hide();
}