Bootstrap - Font Awesome -jQuery Menu Accordion
jQuery Accordian, but with Twitter Bootstrap and Font Awesome, plus the Top Level Menu Item has a URL, as well as the button acting as an icon.
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 class="fa-no-icon"><a title="Title 1" href="#">Title 1</a>
</li>
<li class="fa-no-icon"><a title="Title 2" href="#">Title 2</a>
</li>
<li class="fa fa-caret-right active"><a title="Title 3" href="#">Title 3</a>
<ul class="sub-menu">
<li class="fa-sub-no-icon"><a title="Subtitle 3.1" href="#">Subtitle 3.1</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.2" href="#">Subtitle 3.2</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.3" href="#">Subtitle 3.3</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.4" href="#">Subtitle 3.4</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.5" href="#">Subtitle 3.5</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.6" href="#">Subtitle 3.6</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 3.7" href="#">Subtitle 3.7</a>
</li>
</ul>
</li>
<li class="fa-no-icon"><a title="Title 4" href="#">Title 4</a>
</li>
<li class="fa fa-caret-right"><a title="Title 5" href="view.php?id=1&chapterid=5">Title 5</a>
<ul class="sub-menu">
<li class="fa-sub-no-icon"><a title="Subtitle 5.1" href="#">Subtitle 5.1</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 5.2" href="#">Subtitle 5.2</a>
</li>
<li class="fa-sub-no-icon"><a title="Subtitle 5.3"...
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;
}
.book_sidebar .fa a {
padding-left: 5px;
}
.book_sidebar .fa-no-icon a {
padding-left: 9px;
}
.book_sidebar .fa-sub-no-icon a {
padding-left: 15px;
}
.book_sidebar .fa {
color:gray;
}
.fa a {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
}
JavaScript
$(document).ready(function () {
function toggleAccordion(li) {
if (li.hasClass('active')) {
li.removeClass('active');
$('.sub-menu', li).slideUp();
$(li).removeClass('fa-caret-down').addClass('fa-caret-right');
} else {
$('li.active .sub-menu').slideUp();
$('li.active.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-right');
$('li.active').removeClass('active');
li.addClass('active');
$('.sub-menu', li).slideDown();
$('.sub-menu', li).children().removeClass('active');
$(li).removeClass('fa-caret-right').addClass('fa-caret-down');
}
}
function openAccordion(li) {
if (li.hasClass('active')) {
$('.sub-menu', li).slideDown();
$(li).removeClass('fa-caret-right').addClass('fa-caret-down');
}
}
function checkActive(li) {
alert("checkActive called");
if (li.hasClass('active')) {
if (li.parent().hasClass('sub-menu')) {
toggleAccordion($('.active').parent(".sub-menu").parent());
} else {
openAccordion($('.active'));
}
}
}
$('.book_sidebar ul li').click(function (ev) {
ev.stopPropagation();
toggleAccordion($(this));
});
$('.book_sidebar ul li a').click(function (ev) {
ev.stopPropagation();
//toggleAccordion($(this).parent());
});
checkActive($('.active'));
// toggleAccordion($('.active').parent(".sub-menu").parent());*/
});