Adds a clickable arrow to open mobile submenus

Mobile Menu Arrow Dropdown

// arrow-down.svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="10" viewBox="0 0 16 10"><defs><style>.\33 1fe686d-9374-4003-9b83-d81c4a6d3d09{fill:#A3322A;}</style></defs><title>arrow-down</title><g id="be17913f-2c50-43f6-bd06-b26bc8c02d6a" data-name="Layer 2"><g id="142fe3b1-0c71-4a5c-b4b4-3b547d209226" data-name="Layer 1"><polygon class="31fe686d-9374-4003-9b83-d81c4a6d3d09" points="8 10 16 0 0 0 8 10"/></g></g></svg>

// JS file
/*============================
=            Menu            =
============================*/

	$('.menu-item-has-children').each(function() {
		$(this).append('<span class="menu-item-arrow inactive"></span>');
	});

	$('.sub-menu').each(function() {
		$(this).addClass("nested");
	});

	/*--------------------------------------------
	---- Menu Dropdown
	--------------------------------------------*/
	$('.menu-item-arrow').on('click', function() {
		if($(this).is('.active')) {
			$(this).toggleClass('active inactive').prev('.nested').stop().slideUp(250).animate(
				{ opacity: 0 },
				{ queue: false, duration: 250 }
			);
		}else if($(this).is('.inactive')) {
			$(this).toggleClass('active inactive').prev('.nested').stop().slideDown(250).animate(
				{ opacity: 1 },
				{ queue: false, duration: 250 }
			);
		}
	});

	//---- Stop menu item with certain class being clickable
	$('.menu-item-only-subpages > a').on('click', function(e) {
		e.preventDefault();
	});
  
  // SCSS
  .menu-item-arrow.active {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.menu-item-arrow {
    width: 61px;
    height: 61px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/arrow-down.svg?1475841316) center/16px no-repeat;
    -webkit-transition: transform ease 0.25s;
    -ms-transition: transform ease 0.25s;
    transition: transform ease 0.25s;
}

.no-touch .menu-item-arrow {
  -webkit-transition: transform ease 0.25s;
  -ms-transition: transform ease 0.25s;
  transition: transform ease 0.25s;
}


@include breakpoint(large) {
  .menu-item-arrow {
    display: none!important;
  }
}