Keep displaying childs in menu when clicked

This is my first question on this site. Have been searching here many times and found almost all the answers I needed.

I’m working on a wordpress site using underscores.me ==> test.davidsfonds-zele.be

On the left side you can find a vertical menu that can be opened to click the child-items.

When you click and go to the belonging page, the child item is highlighted, but you can’t see it, because the menu isn’t open anymore.

Is there a way to let it open?

The menu is build in the Adminpanel of WordPress, because other admins (without any webknowledge) are permitted to change the menu as well.

I’ve tried many things, but all without success. If you have a complete other way to do it, feel free to learn me. I think this code I used, is way to long… I used following method to get what I now have:

Site-tutorial: http://cssmenumaker.com/blog/wordpress-accordion-menu-tutorial

function

class CSS_Menu_Maker_Walker extends Walker {

                          var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

                          function start_lvl( &$output, $depth = 0, $args = array() ) {
                            $indent = str_repeat("\t", $depth);
                            $output .= "\n$indent<ul>\n";
                          }

                          function end_lvl( &$output, $depth = 0, $args = array() ) {
                            $indent = str_repeat("\t", $depth);
                            $output .= "$indent</ul>\n";
                          }

                          function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

                            global $wp_query;
                            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
                            $class_names = $value = '';
                            $classes = empty( $item->classes ) ? array() : (array) $item->classes;

                            /* Add active class */
                            if(in_array('current-menu-item', $classes)) {
                              $classes[] = 'active';
                              unset($classes['current-menu-item']);
                            }

                            /* Check for children */
                            $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
                            if (!empty($children)) {
                              $classes[] = 'has-sub';
                            }

                            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
                            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

                            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
                            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

                            $output .= $indent . '<li' . $id . $value . $class_names .'>';

                            $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
                            $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
                            $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
                            $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

                            $item_output = $args->before;
                            $item_output .= '<a'. $attributes .'><span>';
                            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                            $item_output .= '</span></a>';
                            $item_output .= $args->after;

                            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
                          }

                          function end_el( &$output, $item, $depth = 0, $args = array() ) {
                            $output .= "</li>\n";
                          }
                }

Menu.php

<?php
wp_nav_menu(array(
  'menu' => 'Linkermenu',   // This will be different for you.
  'container_id' => 'cssmenu',
  'walker' => new CSS_Menu_Maker_Walker()
));
?>

Javascript

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){

		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
                        element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});

} )( jQuery );

CSS

#cssmenu,
#cssmenu ul,
#cssmenu ul li{
  position: relative;
  margin: 0;
  width: 100%;
  list-style: none;
  line-height: 1;
  display: block;
}

#cssmenu {
  width: 100%;
  float: left;
  font-size: 1em;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
}

#cssmenu ul li {
  font-weight: bold;
  background: #fff;
  padding: 5%;
 }

 #cssmenu ul li a {
  position: relative;
  color: #4d4d4d;
  left: -10%;
  margin: 0;
  width: 100%;
  list-style: none;
  line-height: 1;
  display: block;
  cursor: pointer;
  z-index: 2;
  padding: 15px 7px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#cssmenu > ul > li > a:hover{
   background: #407194;
   color: #fff;
   text-decoration: none;

}

#cssmenu > ul > li.open > a{
   background: #407194;
   color: #fff;
   text-decoration: none;
  display: block;
  position: relative;

}
#cssmenu > ul > li.active > a {
  display: block;
  position: relative;
}

#cssmenu ul ul li a {
  position: relative;
  left: -30%;
  margin: 0;
  width: 150%;
  list-style: none;
  line-height: 1;
  display: block;
  cursor: pointer;
  color: #ed6d16;
  z-index: 2;
  padding: 10%;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#cssmenu ul ul li:hover > a{
   background: #f68615;
   color: #fff;
   text-decoration: none;

}

#cssmenu ul ul li.open > a{
   background: #407194;
   color: #fff;
   text-decoration: none;
   display: block;
    position: relative;
}
#cssmenu ul ul li.active > a {
  display: block;
  position: relative;
}

#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 500px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;

}

#cssmenu ul li li.current-menu-item.current_page_item a {
   background: #407194;
   color: #fff;
   text-decoration: none;
   display: block;
}

#cssmenu ul ul {
  display: none;
}

.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}