JSFiddle - React, Tailwind, and code Playground

HTML

<p><button id="toggle-all">Toggle all threaded comments</button></p>
<ol id="comments">
    <li>
        Comment 1
        <ol>
            <li>Subcomment 1.1</li>
            <li>Subcomment 1.2</li>
            <li>Subcomment 1.3</li>
        </ol>
    </li>
    <li>
        Comment 2
        <ol>
            <li>Subcomment 2.1</li>
            <li>Subcomment 2.2</li>
        </ol>
    </li>
    <li>Comment 3</li>
    <li>Comment 4</li>
</ol>

CSS

#comments li { margin:0.5em; padding:0.2em; background:#aaa; }
#comments li li { background:#777; }

JavaScript

$(document).ready(function() {

    // Toggle all
    $('#toggle-all').click(function() {
        var $subcomments = $('#comments').find('> li > ol');
        if ($subcomments.filter(':hidden').length) {
            $subcomments.slideDown();
        } else {
            $subcomments.slideUp();
        }
    });

    // Add buttons to threaded comments
    $('#comments').find('> li > ol')
        .before('<button class="toggle">Show more comments</button>');
   
   // Toggle one section
    $('#comments').find('button.toggle').click(function() {
        $(this).next('ol').slideToggle();
    }); 
});