JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css">
<ul class="topLayer">
    <li>
        <span><span class="fa fa-chevron-down"></span>1st</span>
        <ul>
            <li>
                <span><span class="fa fa-chevron-down"></span>2nd</span>
                <ul>
                    <li>
                        <span><span class="fa fa-chevron-down"></span>3rd</span>
                        <ul>
                            <li>
                                <span><span class="fa fa-chevron-down"></span>4th</span>
                                <ul>
                                    <li>
                                        <span><span class="fa fa-chevron-down"></span>5th</span>
                                        <ul>
                                            <li>
                                                <span><span class="fa fa-chevron-down"></span>6th</span>
                                                <ul>
                                                    <li>
                                                        <span><span class="fa fa-chevron-down"></span>7th</span>
                                                        <ul>
                                                            <li>
                                                                
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>  
            </li>
        </ul>
    </li>
</ul>

CSS

ul {
}
li {
    padding-left: 10px;
    border-left:1px solid #e3e3e3;
}
span {
    font-weight:bold;
}
.openList > span{
    background:red;
}
.fa-chevron-down {
    margin-right: 4px;
    /* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
.openList > span .fa-chevron-down {
       /* Safari */
-webkit-transform: rotate(0deg);

/* Firefox */
-moz-transform: rotate(0deg);

/* IE */
-ms-transform: rotate(0deg);

/* Opera */
-o-transform: rotate(0deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
 
}

JavaScript

$(".topLayer li ul").slideUp(0);


$(' li ').click(function(e){
    $(this).toggleClass('openList')
    //open lists
$(this).children('ul').slideToggle(200);
    //stop the bubbles
    e.stopPropagation();
})