JSFiddle - React, Tailwind, and code Playground

by Maycon Brito

HTML

<ul class="sidebar-menu">
	<li>
		<a href="#" data-original-title="" title=""><i class="fa fa-home"></i>####### #######</a>
	</li>
	<li class="treeview active"><a href="javascript:void(0)" data-original-title="" title="">
		<span>###. ######</span>
		<i class="fa pull-right fa-angle-down"></i></a>
		<ul class="treeview-menu" style="display: block;">
			<li class="treeview active">
				<a href="javascript:void(0)" class="filho" style="margin-left: 10px;" data-original-title="" title="">#######</a>
				<ul class="treeview-menu" style="display: block;">
					<li>
						<a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
							<i class="fa fa-angle-double-right"></i>#######</a>
						</li>
						<li>
							<a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
								<i class="fa fa-angle-double-right"></i>#######</a>
							</li>
							<li>
								<a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
									<i class="fa fa-angle-double-right"></i>#######</a></li>
									<li><a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
										<i class="fa fa-angle-double-right"></i>#######</a>
									</li>
									<li><a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
										<i class="fa fa-angle-double-right"></i>#######</a>
									</li>
									<li><a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
										<i class="fa fa-angle-double-right"></i>>######</a>
									</li>
									<li>
										<a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title="">
											<i class="fa fa-angle-double-right"></i>#######</a>
										</li>
										<li>
											<a href="#" class="loadView" style="margin-left: 20px;" data-original-title="" title=""><i class="fa fa-angle-double-right"></i>#######...

JavaScript

(function($) {
    "use strict";
    
    var opened = null;

    $.fn.tree = function() {
    console.log("Teste");
        return this.each(function() {
            var btn = $(this).children("a").first();
            var menu = $(this).children(".treeview-menu").first();
            var isActive = $(this).hasClass('active');

            if (isActive) {
                menu.show();
                btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
            }
            btn.click(function(e) {
                e.preventDefault();
    
                if (isActive && opened == this) {

                    menu.slideUp();
                    isActive = false;
                    btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
                    btn.parent("li").removeClass("active");
                    opened = null;

                }
                else {
                    if (!$(this).hasClass('loadView') && !$(this).hasClass('active') && !$(this).hasClass('filho')) {
                        $('i.fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-left');
                        $('.treeview').removeClass('active');
                        $('.treeview-menu').slideUp();

                    }
                    else if ($(this).hasClass('filho') && opened != this) {
                        $("ul.treeview-menu ul").slideUp();
                    }

                    menu.slideDown();
                    isActive = true;
                    btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
                    btn.parent("li").addClass("active");
                    opened = this;

                }

            });

            menu.find("li > a").each(function() {
                var pad = parseInt($(this).css("margin-left")) + 10;

                $(this).css({"margin-left": pad + "px"});
           ...