JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">
    <h2>Title</h2>
</div>
<div class="overview">
    <p>Overview</p>
</div>
<div class="detail">
    <p>Details</p>
</div>

CSS

div .hidden {
    height: 0;
    overflow: hidden;
}

JavaScript

$(document).ready(function() {
    
    $(".detail").each(function() {
                               
        $(this).addClass("hidden");
        $(this).after("<div class=\"expand\"><a href=#>more</a></div>");       
    });

    $(".expand").toggle(function() {
        $(this).html("<a href=#>less</a>")
        var div = $(this).prev(".detail")
        div.removeClass("hidden", 250);      
    }, function() {
        $(this).html("<a href=#>more</a>")
        var div = $(this).prev(".detail")
        div.addClass("hidden", 250);
    });
});