JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="sidebar">
    <ul>
        <li>
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp<a href="http://www.google.com">Item 1 </a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
            </ul>
        </li>
        <li>
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp<a href="javascript:void(0)">Item 2 </a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
            </ul>
        </li>
        <li>
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp<a href="javascript:void(0)">Item 3 </a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 3</a>
                </li>
            </ul>
        </li>
        <li>
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp<a href="javascript:void(0)">Item 4 </a>
            <ul class="sub-menu">
                <li>
                    <a href="javascript:void(0)">Sub Item 1</a>
                </li>
                <li>
                    <a href="javascript:void(0)">Sub Item 2</a>
                </li>
            </ul>
        </li>
  ...

CSS

.sidebar {
	height: 100%;
}
.sidebar {
	background: #fff;
	width: 300px;
	border-right: solid 1px #ddd;
}
.sidebar ul ul {
    display:none;
    padding: 0;
    margin: 0;
}
.sidebar ul li {
	list-style: none;
	line-height: 40px;
	cursor: pointer;
	width: 250px;
	border-bottom: solid 1px #ddd;
}
.sidebar ul li a {
	text-decoration: none;
}
.sidebar ul li i {
	float: none;
	margin-top: 12px;
    color:blue;
}

JavaScript

$(document).ready(function() {
    function toggleAccordion(li) {
        if(li.hasClass('active')) {
            li.removeClass('active');
            $('.sub-menu', li).slideUp();
            $('i', li).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
        }
        else {
            $('li.active .sub-menu').slideUp();
            $('li i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-left');
            $('li.active').removeClass('active');
            li.addClass('active');
            $('.sub-menu', li).slideDown();
            $('i', li).removeClass('glyphicon-chevron-left').addClass('glyphicon-chevron-down');
        }
    };
    $('.sidebar ul li').click(function(ev) {
        ev.stopPropagation();
        toggleAccordion($(this));
	});
    $('.sidebar ul li a').click(function(ev) {
        ev.stopPropagation();
        toggleAccordion($(this).parent());
    });
	/*$('.sidebar ul li a').click(function(ev) {
        $('.sidebar .sub-menu').not($(this).parents('.sub-menu')).slideUp();
	    $(this).next('.sub-menu').slideToggle();
	    ev.stopPropagation();
	    $(this).next('i').remove();
	    $(this).append('<i class="sidebar-icon glyphicon glyphicon-chevron-down"></i>');
	});*/
});