JSFiddle - React, Tailwind, and code Playground

by Annecy

HTML

<div class="news">
    <h2>Headline</h2>
    <p class="news_read-more">Read more</p>
    <p class="news_content">
        Content
    </p>
</div>
<div class="news">
    <h2>Headline</h2>
    <p class="news_read-more">Read more</p>
    <p class="news_content">
        Content
    </p>
</div>

CSS

.news{
    margin: 0 0 1em;
}
.news h2{
    font-size: 2em;
}
.news_read-more{
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
    $('.news_content').hide();
    $('.news_read-more').on('click', function(){
        $(this).next('.news_content').slideToggle(500);
    })
});