Bootstrap - Font Awesome -jQuery Menu Accordion

by brianlmerritt

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="book_toc_none book_sidebar">
    <ul>
        <li><a title="Title 1" href="#">Title 1</a>
        </li>
        <li><a title="Title 2" href="#">Title 2</a>
        </li>
        <li><a title="Title 3" href="#">Title 3</a>
        </li>
        <li><a title="Title 4" href="#">Title 4</a>
        </li>
        <li class="fa fa-caret-right active"><a title="Title 5" href="view.php?id=1&amp;chapterid=5">Title 5</a>
            <ul class="sub-menu">
                <li><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
                </li>
                <li><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
                </li>
                <li><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
                </li>
                <li><a title="Subtitle 5.1" href="#">"Subtitle 5.1"</a>
                </li>
                <li><a title="A True Complete Medicine" href="#">A True Complete Medicine</a>
                </li>
                <li><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
                </li>
                <li><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

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('fa-caret-down').addClass('fa-caret-right');
        }
        else {
            $('li.active .sub-menu').slideUp();
            $('li i').removeClass('fa-caret-down').addClass('fa-caret-right');
            $('li.active').removeClass('active');
            li.addClass('active');
            $('.sub-menu', li).slideDown();
            $('i', li).removeClass('fa-caret-right').addClass('fa-caret-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 fa fa-caret-down"></i>');
	});*/
});