JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="content">
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
    </ul>
    <p class="button">もっと見る1</p>
</div>
<div class="content">
    <ul>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
    </ul>
    <p class="button">もっと見る2</p>
</div>

CSS

.button {
    text-align:center;
    padding:10px;
    color:#fff;
    background:#03A9F4;
    width:200px;
}
.close {
    background:#666;
}

JavaScript

$(function () {
    $('.button').prevAll().hide();
    $('.button').click(function () {
        if ($(this).prevAll().is(':hidden')) {
            $(this).prevAll().slideDown();
            $(this).text('閉じる').addClass('close');
        } else {
            $(this).prevAll().slideUp();
            $(this).text('もっと見る').removeClass('close');
        }
    });
});