<div class="col-sm-4 sidebar-nav"> 
	<div class="nav">
		<h4>Checking</h4>
		<ul>
			<li class="selected"><a href="#">Classic Checking</a></li>
			<li><a href="#">Interest Checking</a></li>
			<li><a href="#">Debit Card</a></li>
			<li><a href="#">Direct Deposit</a></li>
			<li>
				<a href="#">Digital Experience</a><a class="menu-toggle" href="#"></a>
				<ul class="sub-menu">
					<li>
						<a href="#">Link 1</a><a href="#" class="menu-toggle"></a>
						<ul class="sub-menu">
							<li>
								<a href="#">Sub link 1</a><a href="#" class="menu-toggle"></a>
								<ul class="sub-menu">
									<li><a href="#">Sub-sub link 1</a></li>
									<li><a href="#">Sub-sub link 2</a></li>
								</ul>
							</li>
							<li><a href="#">Sub link 2</a></li>
						</ul>
					</li>
					<li><a href="#">Link 2</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Managing Your Checking Account</a><a class="menu-toggle" href="#"></a>
				<ul class="sub-menu">
					<li><a href="#">link 1</a></li>
					<li><a href="#">link 2</a></li>
				</ul>
			</li>
			<li><a href="#">Overdraft Services</a></li>
			<li><a href="#">Quicken</a></li>
			<li><a href="#">Star Privilege Premium Plan</a></li>
			<li>
				<a href="#">Switch Kit</a><a class="menu-toggle" href="#"></a>
				<ul class="sub-menu">
					<li><a href="#">link 1</a></li>
					<li><a href="#">link 2</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

.sidebar-nav{
	background-color: #ecf5fc;
	padding: 0 0 0 20px;

	h4{
		color: #e4173e;
		font-family: 'Roboto Condensed', sans-serif;
		text-transform: uppercase;
		font-size: 20px;
		text-align: left;
		line-height: 40px;
	}
	ul{
		list-style-type: none;
		padding-left: 0;

		li{
			border-top: 1px dotted rgba(0, 0, 0, 0.0980392);
			position: relative;
			width: 100%;
			user-select: none;
			-webkit-user-select: none;
			

			a{
				color: rgba(0, 0, 0, 0.701961);
				padding: 7px 0;
				display: inline-block;
				width: calc(100% - 50px);

				&:hover{
					text-decoration: none;
					border-bottom: 0;
				}
			}
			&.selected a{
				color: #004c84;
				font-weight: bold;
				display: block;
				margin-right: 50px;
			}
			a.menu-toggle{
				position: relative;
				width: 50px;
				text-align: center;
				border-bottom: 0;
				vertical-align: top;

				&:after{
					position: relative;
					right: 0;
					text-align: middle;
					font-family: FontAwesome;
					font-size: 12px;
					content: "\f078";
				}
				&:focus,
				&:hover,
				&:visited,
				&:link{
					border-bottom: 0;
					text-decoration: none;
				}
				&.rotate{
					transform: rotate(180deg);
					/* right: 1px; */
				}
			}
		}
	}

	ul.sub-menu{
		display: none;
		font-size: 14px;
	}
	ul.sub-menu li{
		padding-left: 20px;
	}
}

accordionNav = $(function(){
	$('.menu-toggle').click(function(e) {
		e.preventDefault();
		var toggleButton = $(this);
		if (toggleButton.next().hasClass('active')) {
			toggleButton.next().removeClass('active');
			toggleButton.next().slideUp(400);
			toggleButton.removeClass('rotate');
		 } else {
			toggleButton.parent().parent().find('li .sub-menu').removeClass('active');
			toggleButton.parent().parent().find('li .sub-menu').slideUp(400);
			toggleButton.parent().parent().find('.menu-toggle').removeClass('rotate');
			toggleButton.next().toggleClass('active');
			toggleButton.next().slideToggle(400);
			toggleButton.toggleClass('rotate');
		}
	});
});