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="book_toc_indented book_sidebar clearfix">
    <ul>
        <li >
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp
            <a title="Welcome" href="view.php?id=1&amp;chapterid=1">Welcome</a></li>
        <li >
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp
            <a title="Sections and Objectives" href="view.php?id=1&amp;chapterid=3">Sections and Objectives</a></li>
        <li >
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp
            <a title="Medical Contributors" href="view.php?id=1&amp;chapterid=4">Medical Contributors</a></li>
        <li >
            <i class="sidebar-icon glyphicon glyphicon-chevron-right"></i>&nbsp
            <a title="Spagyric Medicine" href="view.php?id=1&amp;chapterid=5">Spagyric Medicine</a>
            <ul class="sub-menu">
                <li >
                    <a title="What is Spagyric Medicine?" href="view.php?id=1&amp;chapterid=6">What is Spagyric Medicine?</a></li>
                <li >
                    <a title="Modern Medical Problems" href="view.php?id=1&amp;chapterid=7">Modern Medical Problems</a></li>
                <li >
                    <a title="A Systematic Solution" href="view.php?id=1&amp;chapterid=8">A Systematic Solution</a></li><li ><a title="&amp;quot;Self Healing&amp;quot;" href="view.php?id=1&amp;chapterid=9">"Self Healing"</a></li>
                <li >
                    <a title="A True Complete Medicine" href="view.php?id=1&amp;chapterid=10">A True Complete Medicine</a></li><li ><a title="Comparing Spagric" href="view.php?id=1&amp;chapterid=11">Comparing Spagric</a></li>
                <li >
                    <a title="Key Points and Takeaways" href="view.php?id=1&amp;chapterid=12">Key Points and Takeaways</a></li>
            </ul>
        </li>
        <li >
            <i...

CSS

.book_sidebar {
	height: 100%;
}

.book_sidebar ul ul {
    display:none;
    padding: 0;
    margin: 0;
}
.book_sidebar ul li {
	list-style: none;
	line-height: 30px;
	cursor: pointer;
}
.book_sidebar ul li a {
	text-decoration: none;
}
.book_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');
        }
    };
    $('.book_sidebar ul li').click(function(ev) {
        ev.stopPropagation();
        toggleAccordion($(this));
	});
    $('.book_sidebar ul li a').click(function(ev) {
        ev.stopPropagation();
        toggleAccordion($(this).parent());
    });
	/*$('.book_sidebar ul li a').click(function(ev) {
        $('.book_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>');
	});*/
});