JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="title">This is a title</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>
 <h1 class="title">This is a totally different title</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>
 <h1 class="title">and this is another title still</h1>

<div>
    <p>Post body text</p>
    <p class="postfooter">Today's date: blah. posted by: blah</p>
    <button>Do stuff</button>
</div>

JavaScript

$(document).ready(function () {
    $('div').hide();

    $('h1').on('click', function () {
        $(this).next().slideDown();
        $('div').not($(this).next()).slideUp();
    });

});