クリックして展開し、全文を読む機能を実現する純粋なCSS

<div>
    <ul id="content-ul">
        <!-- これは記事の内容を保存する LI タグの本体です -->
    </ul>
</div>

[id^="contTab"] {
    表示: なし;
}

.content-more {
    表示: なし;
}

[id^="contTab"]:チェック済み ~ #content {
    最大高さ: 95px;
    オーバーフロー: 非表示;
}

[id^="contTab"]:チェック済み ~ .content-more {
    表示: ブロック;
    位置: 相対的;
    テキスト配置: 中央;
}

[id^="contTab"]:チェック済み ~ .content-more .gradient {
    背景画像: -webkit-gradient(linear, 左上, 左下, from(rgba(255, 255, 255, 0)), to(#fff));
    背景画像: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
    背景画像: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
    高さ: 80px;
    位置: 絶対;
    左: 0;
    上: -79px;
    幅: 100%;
}

[id^="contTab"]:チェック済み ~ .content-more .readmore {
    表示: インラインブロック;
    背景: #319a1717;
    色: #0014ff9e;
    幅: 300ピクセル;
    高さ: 30px;
    境界線の半径: 32px;
    行の高さ: 32px;
    フォントサイズ: 14px;
    カーソル: ポインタ;
    テキストインデント: 0;
}

関数内部(レスポンス) {
    for (var レスポンスデータの値) {
        document.getElementById('content-ul').innerHTML += '' +
            '<li>' +
            '<h2 class="title">' + val.title + '</h2>' +
            '<p class="update_author">' + val.author_name + ' / ' + layui.util.toDateString(val.update, "yyyy-MM-dd HH:mm:ss") + '</p>' +
            '<input type="checkbox" id="contTab_' + val.id + '" checked="checked" class="tabbed">' +
            '<div id="content">' + val.content + '</div>' +
            '<div class="content-more"><div class="gradient"></div> <label for="contTab_' + val.id + '" class="readmore">クリックして全文を読む</label></div>' +
            '</li>'
    }
}