JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<div class="group">
    <div class="categoryratings-review" style="display: none;">
        <p>Text</p>
    </div>
    
    <span class="showcategoryratings">
        <span class="showcategoryratings-text">Per category</span>
    </span>
</div>

<div class="group">
    <div class="categoryratings-review" style="display: none;">
        <p>Text</p>
    </div>
    
    <span class="showcategoryratings">
        <span class="showcategoryratings-text">Per category</span>
    </span>
</div>

<div class="group">
    <div class="categoryratings-review" style="display: none;">
        <p>Text</p>
    </div>
    
    <span class="showcategoryratings">
        <span class="showcategoryratings-text">Per category</span>
    </span>
</div>

JavaScript

$(document).ready(function() {
    $('.showcategoryratings').on("click", function() {
        $(this).closest(".group").find(".categoryratings-review").slideToggle("fast");
        $(this).toggleClass('active');
    });
});