Snippets: Change Sidebar Widget menu to add click on arrow instead of link

Because of how the widget menu is coded adding the arrow via the ::after selector the clicking for the toggles is added to the entire link (you can't target ::after selectors with javascript) so if you want this menu to work with the accordion only triggering when clicking the arrow you need to re-code the javascript to actually insert html for the arrows. Here is an example of how to remove the core javascript associated with the menu and add your own javascript for the toggle affect.

add_filter( 'wpex_localize_array', function( $array ) {
	unset( $array['menuWidgetAccordion'] );
	return $array;
} );

add_action( 'wp_footer', function() { ?>

	<script>
		( function( $ ) {
			'use strict';

			$( '#sidebar .widget_nav_menu' ).each( function() {
				var $hasChildren = $( this ).find( '.menu-item-has-children' );
				$hasChildren.each( function() {
					$( this ).prepend( '<span class="prefix-parent-toggle fa fa-chevron-right"></span>' );
					$( '.prefix-parent-toggle', $( this ) ).on( 'click', function( event ) {
						var $linkParent = $( this ).parent( 'li' );
						var $allParents = $linkParent.parents( 'li' );
						if ( ! $linkParent.hasClass( 'active' ) ) {
							$hasChildren.not( $allParents ).removeClass( 'active' ).children( '.sub-menu' ).slideUp( 'fast' );
							$linkParent.addClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideDown( 'fast' );
						} else {
							$linkParent.removeClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideUp( 'fast' );
						}
						return false;
					} );
				} );
			} );

		} ) ( jQuery );
	</script>
	
<?php } );

Snippet Type: PHP

Posted Under: Other

All PHP snippets should be added via a child theme's functions.php file.