JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DocumentContents">
    
    <p class="Maintheme">ParentTheme1</p>
    <p class="Document">Document1</p>
    <p class="Maintheme">ParentTheme2</p>
    <p class="Subtheme">SubTheme1</p>
    <p class="Document">Document1</p>
    <p class="Document">Document2</p>
    <p class="Document">Document3</p>
    <p class="Subtheme">SubTheme2</p>
    <p class="Document">Document1</p>
</div>

JavaScript

$('p:not(.Maintheme)').hide();


$('.Maintheme').click(function() {
    var $this = $(this)
    if ($this.next('.Subtheme').length) {
        $this.nextUntil('.Maintheme').filter('.Subtheme').toggle();
    } else {
        $this.nextUntil('.Subtheme,.Maintheme').toggle();
    }
});

$('.Subtheme').click(function() {
    $(this).nextUntil('.Subtheme,.Maintheme').toggle();
});