JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- کلاس اصلی sidebar که فهرست در آن قرار می گیرد -->
<div class="sidebar nav nav-stacked">
    <!-- ابتدای فهرست -->
    <ul>
        <li><a href="#">گزینه اول </a>

            <ul>
                <li><a href="#">گزینه اول </a>

                    <ul>
                        <li><a href="#">گزینه اول </a>

                            <ul>
                                <li><a href="#">گزینه اول </a>
                                </li>
                                <li><a href="#">گزینه ای دیگر</a>

                                    <ul>
                                        <li><a href="#">گزینه اول </a>
                                        </li>
                                        <li><a href="#">گزینه ای دیگر</a>
                                        </li>
                                        <li><a href="#">سومین آیتم از یک لیست </a>
                                        </li>
                                        <li><a href="#">گزینه چهارم </a>
                                        </li>
                                        <li><a href="#">پنجمین گزینه از یک لیست </a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">سومین آیتم از یک لیست </a>
                                </li>
                                <li><a href="#">گزینه چهارم </a>
                                </li>
                                <li><a href="#">پنجمین گزینه از یک لیست </a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">گزینه ای دیگر</a>

                            <ul>
                                <li><a...

CSS

html {
    direction:rtl;
}
.sidebar ul {
    list-style:none;
}
.sidebar ul li ul {
    display:none;
}
.sidebar .tree-icon {
    cursor:pointer;
    margin:5px;
    transition:all .5s linear
}
.rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

JavaScript

$(".sidebar").find("ul").find("ul").each(function () {
    var tree_icon = '<i class="fa glyphicon glyphicon-chevron-down rotate-90 fa-fw tree-icon"></i>';
    $(this).parent("li").prepend(tree_icon);
});
$(".tree-icon").click(function () {
    $(this).toggleClass("rotate-90").nextAll("ul").slideToggle('normal');
});