JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<h2 class="close">Item 1</h2>

<div class="itens">
    
    <h2 class="close">Item 1.1</h2>
    
    <div class="itens">
        <p>
            Conteudo
        </p>
    </div>
    
    <h2 class="close">Item 1.2</h2>
    
    <div class="itens">
        <p>
            Conteudo
        </p>
    </div>
</div>

<h2 class="close">Item 2</h2>

<div class="itens">
    
    <h2 class="close">Item 2.1</h2>
    
    <div class="itens">
        <p>
            Conteudo
        </p>
        
        <h2 class="close">Item 2.1.1</h2>
        
        <div class="itens">
            <p>
                Conteudo
            </p>        
        </div>        
    </div>
    
    <h2 class="close">Item 2.2</h2>
    
    <div class="itens">
        <p>
            Conteudo
        </p>
    </div>
    
</div>

CSS

* { font-family:arial }
h2 { cursor:pointer }
.itens { display:none; margin-left:40px; }

JavaScript

$('h2').bind('click', function(){
    
    var elem = $(this);
    
    if(elem.hasClass('close')){
        elem.removeClass('close').addClass('open');
        elem.next('.itens').slideDown('slow');
    }
    else if(elem.hasClass('open')){
        elem.removeClass('open').addClass('close');
        elem.next('.itens').slideUp('slow');
    }
    
});