Keep displaying childs in menu when clicked in WordPress

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-file:

#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;
}

Post Views: 2

1 comment

Anonymous says:

April 7, 2023 at 11:53 am
I would suggest you to use the CSS classes available in WordPress’s navigation menus. In your case, you can have a function in JavaScript to make elements with .current-menu-parent or .current-menu-ancestor at your accordion menu open. Something like the code below although I have not tested it (since I can’t) :
```
$('#cssmenu li.has-sub.current-menu-parent').addClass('open').children('ul').slideDown();
```
That should make the particular menu show if you place it in document ready.
Log in to Reply

Keep displaying childs in menu when clicked

Leave a Reply Cancel reply

1 comment

Social Network

Related posts

Leave a Reply Cancel reply

1 comment

Social Network