Menu Accordion

<!-- mobile menu -->
<div class="mobilenav--wrap">
    <div class="mobilenav">
    <?php
    if(function_exists('wp_nav_menu')):
        wp_nav_menu( 
            array( 
            'menu' =>'primary_nav',
            'theme_location' => 'primary_nav', 
            'container'=>'', 
				'depth' => 2,
				'menu_id' => 'menu' ) 
		);
		endif;
		?>
	</div>
</div>

/* mobile menu container */
.mobilenav--wrap {
	padding: 0;
	width: 100%;
	top: 0;
	right: 0;
	position: static;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.mobilenav--wrap.show--mobilenav {
	right: 0;
}


/* mobile menu */

.mobilenav {
	width: 100%;
	height: 100%;
	overflow: scroll;
	padding: 0;
}

.mobilenav > ul {
	width: 100%;
	box-sizing: border-box;
	padding-inline-start:0;
}

.mobilenav ul li {
	position: relative;

	list-style:none;
	font-size: 22px;
}

.mobilenav ul li a {
	display: block;
	padding: 15px 0px;
	text-decoration: none;
	color: color(3);
}

.mobilenav ul li a:hover {
	color: color(1);
	transition:all .6s ease;
}

.mobilenav ul li:hover ul {
	display:block;
}

.mobilenav ul ul li {
	border-bottom: 0;
	position: relative;
	font-size: 80%;	
	padding:0!important;
}

.mobilenav ul ul {
	padding-left: 20px;
	background:none;
	padding:0 0 0 20px!important;
}

.mobilenav ul ul li a {
    padding: 5px 0 5px 20px;
}

a.menu-expand {
	padding: 0 !important;
	background: transparent !important;
	width: 44px;
	height: 44px;
	position: absolute; 
	top: 7px;
	right: 0;
	z-index: 100;
}


.mobilenav ul li.menu-item-has-children .plus1{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-180deg);
}

.mobilenav ul li.menu-item-has-children .plus2{
	content: '';
	position: absolute;
	right: 10px;
	top: 24px;
	width: 20px;
	height: 2px;
	display: block;
	background: color(1);
	transition: all 0.3s ease-in-out;
	transform: rotate(-270deg);
}
/*original*/
/*
.mobilenav ul li.menu-item-has-children > a.menu-expand.menu-clicked .plus1 {
	transform: rotate(0);
}

.mobilenav ul li.menu-item-has-children > a.menu-expand.menu-clicked .plus2{
	transform: rotate(0);
}
*/

.menu-clicked .plus2 {
	transform: rotate(0)!important;
}

//hide sub-menus
jQuery('.mobilenav ul ul').hide();

jQuery('.mobilenav ul.sub-menu').each(function() {
	if(jQuery(this).children().length){
		jQuery(this,'li:first').parent().append('<a class="menu-expand" href="#" style="font-size:26px;color:white;"><span class="plus1"></span><span class="plus2"></span></a>');
	}
});

jQuery('.mobilenav ul li.menu-item-has-children').on('click',function(e){
	if (jQuery(this).hasClass("menu-clicked")) {
		jQuery(this).removeClass("menu-clicked");
		jQuery(this).children('ul').slideUp(300, function(){});
	} else {
		jQuery(this).addClass("menu-clicked");
		jQuery(this).children('ul').slideDown(300, function(){});
	}
})

/*original*/
/*
jQuery('.mobilenav ul li.menu-item-has-children > a.menu-expand').on("click",function(e){
	//enable these two lines if you only have one sub-menu level - closes other menus
	jQuery (".menu-clicked").not(this).removeClass("menu-clicked");
	jQuery('ul.sub-menu').slideUp(300, function(){});
	e.preventDefault();
	if (jQuery(this).hasClass("menu-clicked")) {
		jQuery(this).removeClass("menu-clicked");
		jQuery(this).prev('ul').slideUp(300, function(){});
	} else {
		jQuery(this).addClass("menu-clicked");
		jQuery(this).prev('ul').slideDown(300, function(){});
	}
});
*/