JSFiddle - React, Tailwind, and code Playground

HTML

<article class="blog">
     <h3> Title </h3>

    <p class="blog">Short summary here.</p>
    <div class="showrest">Read more</div>
    <section class="invis" style="display:none;">
        <p class="blog">Here is the rest of the article.</p>
        <div class="showless">Hide text</div>
    </section>
        <div class="showrest">Read more</div>
    <section class="invis" style="display:none;">
        <p class="blog">Here is the rest of the article.</p>
        <div class="showless">Hide text</div>
    </section>
        <div class="showrest">Read more</div>
    <section class="invis" style="display:none;">
        <p class="blog">Here is the rest of the article.</p>
        <div class="showless">Hide text</div>
    </section>
        <div class="showrest">Read more</div>
    <section class="invis" style="display:none;">
        <p class="blog">Here is the rest of the article.</p>
        <div class="showless">Hide text</div>
    </section>
    <footer class="blog">Footer text.</footer>
</article>

JavaScript

$('div.showrest').click(function () {
    $(this).next().show("fast");
});
$('div.showless').click(function () {
    $(this).closest('section').hide(500);
});