JSFiddle - React, Tailwind, and code Playground

by Muhammed Basil

HTML

<div class="page" data-subject-page="1">
    <div class="largeText" data-subject-text="">
        <div class="recent-news">
             <h1>main title</h1>

            <div class="notice">
                <p class="notice-type">Date</a>
                    <p class="notice-title">sub title</p>
                    <div class="notice-content">
                        <p>Content here</p>
                    </div>
                    <p><a class="expand-notice">Read more</a>

                    </p>
            </div>
        </div>
    </div>
</div>

CSS

.notice {
        background: #DDDDDD;
        max-width: 40em;
        margin: 0 auto 0.5em;
        padding: 1em;
        text-align: center;
        font-family: sans-serif;
        letter-spacing: 1px;
    }
    .notice p {
        margin: 0;
    }
    .notice-type, .notice-title {
        font-family: sans-serif;
    }
    .notice-type {
        text-transform: uppercase;
        opacity: 0.8;
        font-size: 11px;
        letter-spacing: 2px;
    }
    .notice-title {
        font-size: 20px;
    }
    .notice-content {
        display: none;
        text-align: left;
        margin: 5px;
    }
    .notice-content p {
        letter-spacing: 0;
        padding: 5px;
    }
    .open-notice .notice-content {
        display: block;
    }
    .recent-news {
        margin: 0em auto;
        max-width: 80em;
        padding: 0 3% 2em;
        overflow: hidden;
        text-align: center;
    }
    .recent-news h2 {
        margin-top: 0.5em;
    }
    .news-item {
        display: inline-block;
        margin: 1.5em 0 0 0;
        width: 47.75%;
        background: #fff;
        padding: 2em 0em;
        text-align: center;
        vertical-align: top;
    }
    .news-item:nth-child(2n) {
        margin-left: 3%;
    }
    .news-item p {
        padding: 0em 1.5em;
        margin: 0em;
        line-height: 1.6;
    }
    .news-item p.news-date {
        font-size: 0.95em;
    }

JavaScript

$(document).ready(function () {
    $('.expand-notice').on('click', function (e) {
        e.preventDefault();
        var parent = $(this.parentNode.parentNode);
        parent.toggleClass('open-notice');
        if (parent.hasClass('open-notice')) $(this).text('Less');
        else $(this).text('Read more');
    });
});