<div class="container">
	<div class="description">
		<h1><i>jQuery</i> Accordion Navigation Menu</h1>
		<p>A reusable <i>jQuery</i> accordion navigation menu, works with any amount of categories and subcategories</p>
	</div>
	<div class="nav-wrapper">
		<nav class="nav">
			<ul class="nav-list ul-reset">
				<li class="nav-item">
					<div class="nav-item-inner">
						<a href="#" class="nav-item-inner-heading plus">Mens</a>
						<ul class="nav-sub-list ul-reset">
							<div class="nav-sub-list-inner">
								<li class="nav-sub-item">
									<a href="#">View all</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Featured</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Shoes</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Clothing</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Accessories</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Sports</a>
								</li>
							</div>
						</ul>
					</div>
				</li>
				<li class="nav-item">
					<div class="nav-item-inner">
						<a href="#" class="nav-item-inner-heading plus">Womens</a>
						<ul class="nav-sub-list ul-reset">
							<div class="nav-sub-list-inner">
								<li class="nav-sub-item">
									<a href="#">View all</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Featured</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Shoes</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Clothing</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Accessories</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Sports</a>
								</li>
							</div>
						</ul>
					</div>
				</li>
				<li class="nav-item">
					<div class="nav-item-inner">
						<a href="#" class="nav-item-inner-heading plus">Sale</a>
						<ul class="nav-sub-list ul-reset">
							<div class="nav-sub-list-inner">
								<li class="nav-sub-item">
									<a href="#">View all</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Featured</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Shoes</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Clothing</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Accessories</a>
								</li>
								<li class="nav-sub-item">
									<a href="#">Sports</a>
								</li>
							</div>
						</ul>
					</div>
				</li>
			</ul>
		</nav>
	</div>
</div>

/* ==============================
	$-Variables
============================== */

$body-typeface: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;



/* ==============================
	$-Mixins
============================== */

@mixin box-sizing {
	box-sizing: border-box;
}



/* ==============================
	$-Resets
============================== */

html,
body {
	height: 100%;
	font-size: 20px;
}

html {
	@include box-sizing;
}

*,
*:before,
*:after {
	@include box-sizing;
}

body {
	min-width: calc(300px + 1.5rem);
	margin: 0;
	line-height: 1.5;
	background-color: #333;
	font-family: $body-typeface;
	color: rgba(255, 255, 255, .5);
}

/* headers */
h1 {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 1.6rem;
	color: white;
}

/* highlight colors */
::-moz-selection {
	background-color: black;
	color: white;
}

::selection {
	background-color: black;
	color: white;
}

/* anchor links */
a {
	text-decoration: none;
	color: white;
	transition: opacity 100ms ease-in-out;
	backface-visibility: hidden;
	&:hover {
		opacity: .5;
	}
}



/* ==============================
	$-Modules
============================== */

/* ul-reset */
.ul-reset {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
}

/* container */
.container {
	position: relative;
	top: 7.5vh;
	max-width: 46em;
	padding: .75rem;
	margin: auto;
}



/* ==============================
	$-Styles
============================== */

.description {
	text-align: center;
}

.nav-wrapper {
	width: 300px;
	margin: auto;
}

/* jQuery Accordion Navigation Menu */
.nav-item {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	&:first-child {
		border-top: none;
	}
}

.nav-item-inner {
	> a {
		display: block;
	}
}

.nav-item-inner-heading {
	position: relative;
	padding: .75rem;
	padding-right: 2.5rem;
	font-weight: 700;
	&:focus {
		opacity: 1;
	}
	&.minus:after,
	&.plus:after {
		position: absolute;
		top: 50%;
		right: .75rem;
		transform: translateY(-50%);
		width: 1rem;
		text-align: center;
		font-family: FontAwesome;
		font-style: normal;
		font-size: .6rem;
		color: GoldenRod;
	}
	&.minus:after {
		content: "\f068";
	}
	&.plus:after {
		content: "\f067";
	}
}

.nav-sub-list {
	display: none;
	font-size: .8rem;
	overflow: hidden;
}

.nav-sub-list-inner {
	padding: 0 .75rem .75rem;
}

.nav-sub-item {
	padding-left: .75rem;
	margin-top: .375rem;
	&:first-child {
		margin-top: 0;
		font-style: italic;
	}
}

// j

//// accordion navigation menu
function accordion(section, heading, list){
	$(section).each(function(){
		var act = 'active',
				actClass = '.active',
				that = $(this);

		function tglH(){
			that.find(list).slideToggle(250);
		}
		function open(click){
			$(click).toggleClass('plus minus');
			tglH();
			that.find(list).addClass(act);
		}
		function close(click){
			$(click).toggleClass('minus plus');
			tglH();
			that.find(list).removeClass(act);
		}

    if ( that.find(list).length == 0 ) {
      $(this).find(heading).removeClass('plus').addClass('no-sub');
    } else {
      $(this).find(heading).click(function(e) {
        e.preventDefault();
      });
    }

		$(this).find(heading).click(function() {
			if ( $(this).hasClass('minus') ) {
				// close this menu
				close(this);
				that.find(list).removeClass(act);
			} else if ( $(this).hasClass('plus') ) {
				if ( $(heading).hasClass('minus') ) {
					$(heading).each(function(){
            if ( !$(this).hasClass('no-sub') ) {
              $(this).removeClass('minus').addClass('plus');
            }
          })
					$(section).each(function() {
						if ( $(this).find(list).hasClass(act) ) {
							$(actClass).slideToggle(250);
							$(this).find(list).removeClass(act);
						}
					});
					// open this menu
					open(this);
				} else if ( $(this).hasClass('plus') ) {
					// open this menu
					open(this);
				}
			}
		})
	})
}
accordion('.nav-item', '.nav-item-inner-heading', '.nav-sub-list');