JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">More</a>
<div class="gallery">
    <dl>
        <dt>1</dt>
        <dd>Text TEXT TEXT</dd>
    </dl>
    <dl>
        <dt>2</dt>
        <dd>2</dd>
    </dl>
    <dl>
        <dt>3</dt>
        <dd>3</dd>
    </dl>
    <dl>
        <dt>4</dt>
        <dd>4</dd>
    </dl>
    <dl>
        <dt>5</dt>
        <dd>5</dd>
    </dl>
    <dl>
        <dt>6</dt>
        <dd>6</dd>
    </dl>
    <dl>
        <dt>7</dt>
        <dd>7</dd>
    </dl>
    <dl>
        <dt>8</dt>
        <dd>8</dd>
    </dl>
    <dl>
        <dt>9</dt>
        <dd>9</dd>
    </dl>
    <dl>
        <dt>10</dt>
        <dd>10</dd>
    </dl>
    <dl>
        <dt>11</dt>
        <dd>11</dd>
    </dl>
    <dl>
        <dt>12</dt>
        <dd>12</dd>
    </dl>
    <dl>
        <dt>13</dt>
        <dd>13</dd>
    </dl>
    <dl>
        <dt>14</dt>
        <dd>14</dd>
    </dl>
    <dl>
        <dt>15</dt>
        <dd>15</dd>
    </dl>
</div>

CSS

dl {font-family: 'Segoe UI', verdana, sans-serif;}
dl dt {display: block; font-weight: bold;}
dl dd {display: block; margin: 0 0 0 10px;}

JavaScript

$(document).ready(function () {
    $('.gallery dl').hide();
    $('.gallery dl:lt(6)').show();
    $('a').click(function () {
        $('.gallery dl:not(:visible):lt(3)').show();
        return false;
    });
});